Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 the videos so far in this chapter, we've actually been working with, what are sometimes called simple selectors, at least I thing of them as simple selectors. In each of these cases, we're making one selection at a time. So, for example, h1. So in this case, we're saying, any h1 element, make it's text uppercase, like we just did there.
And that's all fine but we're really only selecting one thing at a time and suppose we wanted to do that for all heading levels, one through six, so we might do it like this. If we hit Reload we'll have the desired effect, but that's really clumsy and just not very efficient, you might think yourself, man there probably should be a better way to do that and fortunately, there is and it's called a group selection. So the way this works is all the things you want to select, you can group together using commas just like this.
Actually, I'm just going to do it like that. So instead of saying repetitively h1 text-transform uppercase, h2 text-transform uppercase, well, I'll just say h1, h2, h3, h4, h5 so, we're using the commas to group them all together and then if we hit Reload, there's no change, because what we've just done here is functionally exactly the same as this. This and this are equivalent. This is much nicer so this is the right way to do it.
Now if you don't like putting all the stuff on one line, all your selectors on one line, you can group them like this, that's ok. That's going to have exactly the same effect, the whitespace there doesn't really matter. It's the commas that are important, the commas bring these together into a group. One thing you do want to watch out for, is that sometimes you can get a little carried away and put a comma at the end and that often completely breaks what you're trying to do, as you can see here, all the text transform and all the uppercasing ran away. Just having a comma at the end of your selector with nothing after it except for the declaration block that's a no, no. So you want to make sure you don't have that last comma, right before the declaration block starts. So, as another example, suppose we wanted to put back a color on all table elements, either table data, cells or table header cells, we can do th, td, or td, th, that order actually doesn't make any difference at all and then say background and we'll pick something that might look very cryptic to you but which we will discuss in a later chapter on colors and backgrounds and then if we scroll down a little bit and look at the post archive, by hitting a Reload, there we go. We've added a greenish background color to the backgrounds of all of the th and the td elements in the entire document. This just happened to be the only ones. So as we said before, you can group anything that you like.
You can group when any selector type, we can have all Wednesday ths and all Friday tds that for whatever reason we wanted to do that, we could have let's just say any table header with a class of Wednesday and any td element with a class of fri, do this and so when we hit Reload, there you go. You can have Ids in your selectors that you group together, classes. Really, all you're doing is what was shown before. With a group selector, you're just compressing down this sort of a thing to this. So, that's grouped selection.
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.