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, we're going to talk about making things important, and the best way to introduce that is to present you with a situation you might run into actually more than once in your styling career. Suppose here that this h1 that says about tea history, with the white background, we want to change that background to green. So let's make a stab of that, let's say h1 background green go back over, hit Reload, wait a minute, nothing happened.
Something 's gone wrong. Here's what I'm going to do to find out what's gone wrong is what you think. I'm going to say important, so not only do I want this h1s background to be green, but it is important to me that it's background be green and we'll go back, go hit Reload and green it is. what this tells me is that somewhere in my style sheet I have the rule that's setting that white background, has a higher specificity than just plain old h1, so I'm using important as a diagnostic tool here in affect.
Important declarations override any non-important declarations. no matter what the specificities are, no matter anything else really. If I say h1 background green important, then any non-important declarations that try to set the background color for an h1 no matter how high the specificity of their selector is, no matter what their source is, they will lose out to this important declaration. So I know what the problem is, now I just need to dig into the style sheet.
So in my style sheet I'm going to take a look and see where's an h1, where am I setting an h1, ahhhh! here, I have content h1 background fff, so that's what's setting that white color and if I take away the important, then, because both those declarations are not important both the one in my external style sheet that I just looked at and this one here, then this one is going to lose out again, unless I fix the problem either by raising the specificity of this selector to be equal to the other one, or by lowering the specificity of this selector to match the one that I had over here. So, at this point, it stays grey. If I hit Reload, no matter how many times I hit Reload, it's going to stay green, because this has the same specificity as the rule in the external style sheet, there's a selector in the external style sheet and so because this one comes later it wins out.
Now that's a very important to do for diagnostic purposes, because supposing I've done this and not realize that I misspelled h1 which, don't laugh, I've done it and I say h, exclamation point, background green and then nothing happened since I say important and still nothing happens that tells me that my problem is not specificity, it's something else, in this case it's that I misspelled h1, but it's equally important to not leave near important directive in your style sheets before you deploy them. There's the temptation to say okay, I'm going to throw in an important here to see if that fixes it, hey, it fixed it, great, I'm just going to leave it alone.
I'm going to put this up on the web with the important in there, and that's not such a great idea because, you might find in the future that you want to override this particular style somewhere else and so basically, the more importants you leave in your style sheet, the more likely it is that you're going to run into a conflict later and have to add more important directives, so the more of them you have, the more of them you end up getting in your style sheets. That's why I say never leave important in a style sheet, if you can possibly avoid it. Any time I go back and look in my own style sheets and see an important playing around, I pretty much know that the day that I did that I was being lazy.
And it's something that I should really go back and fix. So that's just in a nutshell how important works. Any declaration that is important is elevated onto its own plane and effectively that, and that wins out over any non-important declarations, no matter what the other factors are and only when you have two important declarations that conflict do you go back to using the cascade resolution mechanisms, like specificity and the order that they're declared in and all those other sorts of things.
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.