In this lesson, we are going to further examine the external style sheet. It certainly isn't difficult, you just need to remember there are two key components. In this lesson, we are going to talk about the physical makeup of the external style sheet. So let's take a look at one and we'll make it along the way. The first thing we got to do is we have to figure out what we are going to affect with our style sheet. So I've kind of made one beforehand that way I can go through and explain the choices and that sort of thing. So what I'm going to do is I'm going to start my style sheet with the body tag and remember we offset styles in an external style sheet, well actually in an internal as well, but we need to make sure that we offset our styles inside of curly braces. So I'll drop down a couple and add a separate curly brace and we're going to use some pretty simple styles. It's really more about the architecture of the whole thing than the look of what we end up with. In fact, it'll be kind of interesting because I don't know what this is going to look like on a web page. So there will be something exciting down the road for us. So the first thing we're going to do is we're going to set a background color and I always try to pick colors that seem pretty benign. So I'll select Olive. Do not forget that every time we add an attribute and an element before we move on to the next one, we must put a semicolon at the end of that. With Olive, we're going to set the color for all text to equal Navy and we're going to add something we haven't played with before and it's going to be the font size, but we're going to do it just a little bit different. So we have font size and I'm going to call it 1.1 and then em and we'll come back to that. So there are the choices that I've decided to use for the body. Next, I want to create a specific style for the H1 tag. So I'll put in H1 and offset with curly braces and the only thing we're going to do with this is we're going to set the color of H1 to Navy so it matches the rest of our text. Now we're going to use an element that we haven't used before, but it's going to play a very important role as we move along and that is we're going to use the ID in our style sheet. If you recall on the lesson in hyperlinks, we used IDs to make content on specific pages searchable. Well we can also do that but apply the ID to the style sheet so it gets a style and is still searchable. So we're going to call this one, let's just call it comments and we'll offset it and on this one we're going to set a color as well and we're just going to use color and red. Lastly, we're going to use the element we're used to using and that is a class designator. So remember a class designator starts with a period and we're just going to call it Fred and Fred is also going to have a color and Fred's color is going to be, I don't know what it's going to look like anyway so let's take some chances. So what we've done is we've essentially created an external style sheet. Now the thing we want to notice is that there is no need for the style tags within the style sheet. The reason is is when we call a style sheet into a web page or some HTML document, we are going to denote at the top in the head that we are going to use this style sheet. Now we've talked about everything in here, we've talked about the IDs, we've talked about classes, but I should tell you what the real difference is between classes and IDs. In the ID they need to be unique. So if I have one called comments which I will freely admit is not the best name for an ID. But if I use that on a specific web page, I can't use it again on that web page because the focus of the ID is being able to search information from that web page, especially if there's a lot of content. And you know, I have written over time quite a few manuals for online distribution. So like instruction manuals, warranty manuals, things like that. And I've used the ID a lot. The best feature of the ID is being able to make an entire site searchable. So we have to think ahead. So in this case, I just want to point out, and I'm sure we'll come back to it, that if you are planning a rather large website, it's a real good idea to plan your ID selections at the very beginning.
