The CSS Cascading Order

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.

Specificity

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.

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.