[MUSIC] Welcome to the next lesson. In our last lesson, we reviewed some elements of CSS syntax. In this lesson, we're going to look at how we get started with external CSS and deal with some of the problems that frequently occur when we're just starting out. So here, I have a version of a var we've equipped before. This was a var we used for some JavaScript testing. And I've removed the various stale elements, all except for one, this bit online 33, where I have a body and then style equals Background-color: lightblue. So, what this should give me is a page with a light blue background. I've already saved my file. So, I'll try opening it in the browser. Now, here's the page and it has the text that I expected and the button I expected, but it's not light blue. So let's return to the page for a moment and look closely at line 33. Now this is a common kind of problem, not maybe this one specifically but very similar problems, I've misspelled the word style. So I can fix that by editing the file, just like I would fix any other sort of type or syntax error. Save, and then I'll try refreshing, and now I get the blue background. So, when your CSS, off with that matter your HTML. Don't work quitely you expect. Look very closely to your syntax. So what now, this is an in line style and I've mentioned in the previous lesson that we are going to move away from using a line styles and focus instead on external CSS, which is usually a best practice. So to do that, we need to place our CSS in a separate file. In here, we have most of the syntax we need as we've seen before. Link and we need to specify the stylesheet, the type, text/css and finally, an href that references the file. So, here's the file that we've used in the past. And what I'm going to do Is save this with a new name. And I'll also Dissimulate starting up fresh, remove everything in the file. And we'll save this. And we'll return to our file and type basic test. And you'll notice here that I've again misspelled the word. So you have watch very carefully for this. And make sure that the file name matches the actual file name and location. Now, we know this CSS we'd like to use, it's right here, but we want to move it into an external file and this will make it easier for us to maintain. At the moment, we have just one style but any of our pages will eventually have many styles. So, I'll copy this in. I'll get rid of the portion of the syntax that belongs to an inline style. I don't need the key word style and I don't need the quotes. So, now, I should have a working external style sheet. I have my body tag, I specify here the style that I want, I'll return here. I'll make sure my file name is correct, basic test and that I've removed the style here from the body tag. And let's do one more test. Let me remove this reference, just for a moment. Save my file. Now my body kept no longer has in line style. So, this, when I refresh it should have no background color. It doesn't. I did this to make sure that I'm no longer using an in line style from the HTML. I made sure that I can no longer see it, no longer see a blue background. Now, the next time I see the blue background, I should see it coming from my external file. And basictest, spelled correctly. And I'll save it. Now we hope of course, at this point, that we're going to get the results that we want. But notice that we don't. So what I'm going to do is carefully check the name and that checks out. Make sure that I didn't somehow damage the syntax here, but this looks okay. And then I'll go back to the basic test files to see if these all looks okay. On line two, I see background-color: lightblue, ending with a semicolon, that looks fine. But then I notice on line one that I've mistyped body. The t is so closed to the y on the keyboard. Just made a small mistake. Save. Go back and refresh. And now, I have a working background. So, once I have this I can now expand this style sheet, add as many CSS styles as I need and I know that my connection of the style sheet for this page with this syntax on line seven is working properly. So try going through an approach similar to this, you don't have to make the mistakes I made but [INAUDIBLE] approach like this, and you'll be able to get your CSS working with just one style before adding more. It's important to test each step to make sure you're able to get the results you want, before you make too many changes at one time. So in our next lesson, we'll be looking at more details and tips for CSS.