Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
In addition to the cascade, inheritance, and specificity, there is one more CSS technique that can be used to resolve conflicts, and that is the important declaration. I like to call the important declaration the WMD of CSS. It doesn't matter what else is going on in your styles, in the event of a conflict, the important declaration wins, end of story. In fact, the only thing that can override an important declaration is another more specific important declaration, or some type of user-controlled style sheet. Let's try it out.
I have the important.htm file open here. You can find this in the 03_05 folder. Again, very simple. We have a section of an ID of main content, a paragraph with the strong tag inside of it, so really, you know basically the same thing we had in the previous movie. I want to go back up to our styles here and after the existing paragraph selector, I'm going to type in mainContent p, and here we're just going to get a new color, green. Obviously, the paragraph was going to be red, but we know since this paragraph is inside of an ID with main content and we know that the selector is much more specific plus its placed in the cascade, we know pretty what's going to happen here. If we preview this in a browser, yes, indeed we get green text.
Okay, so nothing new there. I want to go down, however, into the actual code itself, and I'm going to apply an inline style here, so style equals, and inside that I'm just going to new color purple. So again save this, preview this, and exactly what we expected to happen. So we have got inheritance, we have got the cascade, we have got the inline styles going on here, and all of them are behaving exactly the way we expected them to. But remember, there is one rule to rule them all, and that is the important declaration.
If I go back up to my very first paragraph selector and after the property value red-- now I'm going to do this inside of the semicolon, but leave a little bit to whitespace between the property value and this-- I'm going to type in an exclamation point and the word important. So the exclamation point means you're serious, so hey, this is important. And that's really what this is saying: this is saying hey, this is the most important thing in the world regarding this property. So you need to overwrite everybody else. So if I save this and once again preview it, it goes right back to being red.
So irregardless of the cascade, irregardless of specificity, irregardless of the inline style, the important declaration wins, and it will win every single time. Of course this is an extremely useful tool to have. I really want to caution you about using this. Too many times, designers that are new to CSS and when they run into a styling conflict that they just can't seem to solve with their complex site, they will just throw the important declaration out there, knowing that it's going to apply the desired styling and solve any of the other conflicts, so they just kind of start doing that as a regular thing.
Now the problem with this is that pretty soon you're styling becomes littered with important declarations that makes your styles an absolute nightmare to maintain, and it's almost impossible for anybody following you and editing your code to track down any of those styling conflict, because you have those things overwriting everything else. I would even almost go as far as to recommend that you not even use it or that if you do use it, you think of it as like kind of a last resort. Now I'll be honest, in all of the years that I've styled sites with CSS I have never used it, not one time.
I have always found that there's always another way to solve conflicts. Now, I'm not saying that you should never use it, just that I personally have never had to. In some cases, such as like a user- interface-widget styling that you want to make sure it never gets overwritten and those user interface widgets might travel from site to site, I would say it's very acceptable to use it. I'm just saying that make sure you have a valid reason for using it and that you have documented its use in your CSS, so that it doesn't come back to haunt you later on.
There are currently no FAQs about CSS: Core Concepts.
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.