Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
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.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.