[MUSIC] Welcome back. In our last lesson, we talked a little bit about the artistic aspects of developing our websites and how they should look and some things we could avoid. In this lesson, we'll talk more about code aspects of how our websites appear, particularly with CSS. In a previous video, we talked about three different approaches to CSS. Inline, Internal and External. These sometimes have different names depending on who you're talking to, and we've been using inline so far in this course. It turns out that inline is actually the probably worst approach to CSS because, in the long term, it's harder to maintain. It makes more work for us, so take care of CSS when it's done inline. In this lesson, we'll look at it In terms of the internal approach and the external approach. So, let's look at a bit of code. Here we have our JavaScript testing that we used in a previous video for testing out JavaScript, and in that video, we used a line for output, so refresh this, and, for instance, here we have the result is 5. We were using it as our testing output. Then you can see that it's green and relatively large, and that's because this line here, 43, this paragraph for output has an inline style, where the color is green and the font is 200% normal size. These are the name value pairs that we discussed previously that make up the styles, and they're separated by semicolons. This approach works, but if we apply the string or strings that are similar to many different elements on the page, that becomes harder to manage, and we need to make changes. Like, for instance, we want to change this into some other value, it becomes a little difficult to do. So the next sort of best approach, a little better that this in line styles are the internal or local styles. And we have an example of those here on lines 29 through 32 where the styles are being delimited by style tags. These are similar in appearance to HTML tags, but they don't actually show up on the page. And notice here, just like on line 43 where we have style information, we have similar information here Color:blue and font-size:100% name value pairs. But in this case, on my 30 and 31, these have names, regular and medium. And what these notation means is p.regular and p.medium mean that a paragraph tag denoted with regular or paragraph tag denoted with medium will get this styles and they will apply to every paragraph using regular or medium on the page. So that, if we want to make modifications to regular, we can do so by just making one change here and little apply everything on the page. So Scrolling down a bit here on line 45 we can see our paragraph tag with the class regular and the text, this is a test of regular. So let's have another look at this page where this is a text of regular using blue and it's a smaller font because We said that it should be 100% the size right here. And compared to the green font which is 200%. We'll go back and look at that. 200% and 100%, and we're doing this with CSS. Now, There's yet another approach to CSS that is probably best of all. And that is defining our styles in a separate file. So I have a file here called basic.css and we're free to name this as we choose in most cases. So, here We've got a style for the body, a style for each one tags. And this means that anybody element in here are site that uses this CSS. We'll have a background color of light blue. And each one tag We'll have a color of navy, and a left margin. We haven't seen this before, a left margin with 20 pixels. We'll talk more about pixels, what they are in a future video. And here we have our test class of like ten, and we'll go back to Our tag here on line 47 where we have testClass and we'll see how that one works in a moment. In this case the color will be red and the font size will be 300 and the advantage here is that we can maintain our CSS All in one separate file. And we're not mingling it with HTML and JavaScript, which could be kind of confusing. Notice if we look here we've got inline style, we have local style, we have JavaScript, and we certainly have some HTML, making this file harder to maintain. Then this one which is just CSS alone. Now the way we use that external CSS is with syntax here on line 7. A link and we specify these aspects. The style of sheet and that the type is text CSS. Our href. Here should be the name of the file, so I'll complete that. And now we have basic CSS, which matches this file name, basic CSS, and we'll save. And then we'll return to our page and when we refresh, we'll see that we have a lot of change. The background is blue, as we said it would be, and Our test class paragraph tag, scrolling down, here on line 47 is large and red just as we see it should be here when we look into our external CSS file, color red and font-size 300. So In our next video we will be continuing our discussion of CSS syntax and some more CSS tips and tricks.
