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.
As a follow on to the previous video I just want to take a minute to talk about a few best practices when it comes to classes. It can be very tempting to over class as it were, to end classes really nearly and I hit her in Jan. Just on the off chance that you might need them some day. As an example here in this document, you can see where we have these list items here that contain links that are navigation links and every one of these list items has a class of navlink and in the a element, inside them have classes of navlinks and this is really, really, really inefficient.
There's no need for all of this navlinking classing to happen here. Instead, you could just take all that out so that instead of having classes everywhere, you just have these plain elements and then you might wonder to yourself well, how am I supposed to select those. Well, that's coming up later in the chapter, about the short preview answer is that you use the ID up here on the element that encloses all these other elements in order to make your selections.
This sort of drive to class everything in sight is an understandable one, but it's one that needs to be restrained. You can end up loading your documents markup and making it harder to maintain, harder to read, because with all those classes everywhere there's more markup to deal with. Here, it's much cleaner. There's one other thing that can be done with classes and you remember we had first and last perhaps from the last one.
You can actually have multiple words in the same class attribute, so we can have first and we can also have urgent. So not only is this list item in have a class of first meaning that it's the first element of something that's the meaning that we've just decided to give to first, is not that the class name first intrinsically means this is the first element of something else, is just that we're using the name first to mean that and also the name urgent to mean that there's something urgent about this particular bit of information. So what we have here is a list item that's in the class first and also the class of urgent and those can be addressed separately in effect, so we can say li.first background yellow, actually let's make it dot first background yellow.
So any element with the class of frst will have a yellow background and if we go to Firefox and hit Reload, then we can see that indeed we have yellow backgrounds for all the elements that have a class of first, but we can also say, any element with a class of urgent, will italicize. So now when I hit Reload, the, the text about us is in italics, because both of those selectors both of those class selectors match this particular elements class and the order these are in, actually doesn't matter.
So the fact that we have urgent and then we have first, the order that these were joined in this class value doesn't matter. It doesn't make a difference in terms of what the order is up here. Now, the order the styles are in a style sheet can matter, but we'll talk about that in a video leader in this particular Chapter. That's one thing that you can do with classes. It's not a common need it's not like you'll be doing this what's sometimes called multiclassing, every time you write a document. But the times, that you do need it, it comes in very handy.
One classic example is if you're creating a portal page and the portal has little boxes in it that have different bits of information in different forms, each one of those might be rapped in a div, but the widgets that allow user input of some kind for example, a weather box, where the user can input their zip code and get the local weather, you can have that div class equals widget and then a space and then user input or input allowed, or you know, whatever class that makes sense to you and then have a rule that styles all the little widgets with, you know, put a little border around them and whatever else you want to do, but then with the class of input allowed, or user input, you can change just certain aspects of how those particular widgets are presented that the border is red and thicker, or there's a different background color on that particular widget. So, that's the sort of situation in which multiclassing can come in very handy.
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.