Join Eric Meyer for an in-depth discussion in this video CSS essentials, part of CSS Web Site Design.
- View Offline
In this video, I'd like to cover some basic CSS terminology in terms that you may or may not have heard before and if you've heard, you may or may not be familiar with. I just want to go through those so that we're all on the same page in the rest of the videos because these are terms that I'm going to be using again and again and again and again and they also help express the fundamental syntax of CSS, which is somewhat useful to know. So the first thing, that we want to look at, is what we call properties.
Here we have two properties, color and font size. Property describes an aspect of an elements presentation so color is one aspect of the presentation of an h1, the font size is another aspect of the presentation. There's a whole long list of properties that we could talk about and throughout the rest of the videos we will, at least for many of them. We'll talk about many of the properties that can be used. The important thing to keep in mind right now is that, anytime you have a property, it's always followed by a value, and the property and value are always separated by a colon. So you see, here we have color, colon, and font-size, colon and after each of those we find the values.
In the case of color that would be #333, which is a short hexadecimal color notation. We'll talk about that in a later chapter and for font size the value is X-large, which is short for extra-large. These are just two of the many, many possible values there are, values can be names such as ex-large. These are more technically known as keywords, a measurement of length, a percentage value, a color expression, any number of things can be values and throughout the videos we're going to see a lot of those.
when you write your value, you always want to follow with the semicolon, because the combination of property and then a colon separator and the value and a semicolon, terminator is what's called a declaration, and here we have two declarations, color #333, font-size X-large, each of those being its own declaration. Now, as I said, you always want to follow the value with a semicolon. Technically speaking, it's a declaration that has to be terminated or ended with a semicolon. You can, if you have one in one declaration, as we have here, we have two you can technically leave off the last semicolon, the one in this case after font size X-large. You could leave that off, because it's the last declaration in the series, but it's generally regarded as good practice to always terminate your declarations with semicolons whether or not the declaration question is the last one in the series just because supposing you left off the semicolon after font-size X-large and then came along later and decided to add another declaration.
You might forget that that semicolon wasn't there and that will lead to a lot of bad stuff, because if you have two declarations in a row, but no semicolon separating them, then, as far as CSS is concerned they're not two declarations, they one very weirdly formed declaration, that's not going to have the effect that you want so it's just easier to always just get in the habit of finishing every declaration with a semicolon. A series of declarations contained together in the curly braces, which you can see here, is what's called a declaration block, probably because it's a block of declarations. It's always surrounded by curly braces so that the curly braces are basically the begin and end points of your declaration block just like the semicolon is always the endpoint of a given declaration.
Now next to a declaration block, you have what's called a selector and the selector describes what elements will be selected in your document to have the styles described in the declaration block applied to them. So in this case, we've said that all h1s should be selected, all h1 elements should be selected and the styles in a declaration block associated here should be applied all h1, all h1s should get a color of #333, which is a dark gray and should have a font size of extra-large. All of this, the selector and the declaration block taken together is called a rule.
So this is one rule and the rule is h1, color #333, font-size X-large. So these are the various components of a rule. A style sheet can contain anywhere from one to theoretically infinite number of rules and those are together all applied to a document. Now, at this point not to worry so much about exactly what selectors can be written and exactly what properties and values there are, or for that matter, even how to associate CSS with XHTML, because those are all going to be covered in other videos, other chapters. Now, there's an entire chapter on selectors and declarations, properties and values will be covered throughout pretty much the entire rest of the series as for ways to associate CSS with XHTML, that is the subject of the rest of the videos in this chapter.