html tutorials web design help css tutorials free web graphics diy search engine optimization

The CSS Cascading Order

By now you know that styles are simply the rules you create for how various HTML elements should display. The term "cascading" refers to the order of importance the browser should follow when it encounters conflicting style rules.

For example, you may have a rule in your external style sheet that specifies the first letter of the first word in each paragraph tag is rendered in bold text. You may have another rule in your embedded styles that specifies that the first letter should be rendered in normal text, but colored red. The browser needs to know which rule to follow, and it's the cascading order that determines that.

Here's the cascading order, in order of importance:

! important
This can be added to any style rule, and nothing is supposed to override it (there is one exception, explained in the next rule). I wrote nothing is supposed to override because this rule is not well-supported by browsers at this time, so it's not likely to make any difference if you use it until the next-generation of browsers are out. Here's an example of proper usage:

h3 {color: red ! important}

Origin of Rules
Both the web page author and the surfer can specify style sheets. A reader may have poor vision, so creates a style sheet that renders text larger than normal. When rules between author and reader conflict, the author's rule will override the surfer's rule of equal weight.

However—and here's the exception I mentioned in the first rule—if the reader makes a rule important it will override the author's rule, even if the author made the same rule important. It used to be the author's rule would override the user's rule if both were made important, but that has been changed.

Inline Styles
Inline styles override embedded and external styles.
Embedded Styles
Embedded styles override external styles.
External Styles
External styles are the wimps, only coming out to play when no other styles challenge them. As low in the cascading order that they are, they are still the most powerful because of the ability to change one file and have that change reflected on all your pages.
If the previous conflict resolution hierarchy hasn't yet solved the problem, conflicting styles can be resolved based on specificity. The more specific style overrides a less specific one.
Order of Specification
As a last resort, when all other conflict resolution specifications cannot determine which style should take precedence, the last style specified will be the style used.
This concludes the introduction to CSS. You may want to re-read it to solidify your understanding. After you have grasped the basics, it's just a matter of looking up which rules you can use with various HTML elements and applying them.

For a chart of various CSS selectors and values, you may want to purchase the latest edition my web design book, which includes comprehensive CSS reference charts and several CSS tutorials, as well as three chapters about CSS. Or, consider joining my Inner Circle where you find over 30 handy reference charts, tons of web design tutorials, online utilities such as my colored scrollbar code generator; along with great freebies, software discounts, and much more.

Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)