06-Style Precedence

Author: * Sankira Qin - 15 Posts on this thread out of 1,337 Posts sitewide.
Date: May 26, 2005 - 13:23

The Cascade

Sometimes when dealing with CSS you will find that you will want to override a previously declared rule. A prime example of this occurs regularly here at AW when you decide you want to change the font type or the font color Jot has used for standard posts or on your homepage. Jot's rule for the standard text at AW is:

.community { font-size: 14px; color: #ffcc66; font-family: "Times New Roman", "Times", serif; background-color: #000000; }

When you decide that you would prefer to use Comic Sans MS as your font and make it light blue, you may add a rule that says:

.community { color: #bdceff; font-family: Comic Sans MS, Arial, sans-serif; }

The reason your new rule works is CSS precedence. According to Webster's Dictionary,

precedence (pres'i dƏns), n. the right to be dealt with or placed before others; priority in order, rank, or importance.

The term cascade in Cascading Style Sheets refers in part to this idea of precedence when the browser hits conflicting rules. How does the browser determine which rule should win out?

Normal Rules of Precedence

The complete technical way in which a browser resolves conflicts in CSS is beyond the scope of this tutorial. If you decide to become a CSS pro, you'll need to learn all the W3C specifications. But for now, we can take a look at the general way in which CSS deals with precedence. The most important factors are inheritance, the document's structural tree, and specificity or the 'closeness' of the style to the element being affected. Styles are found in four major locations:

The browser's defaults
External stylesheets (located in a separate document with no tags and saved with a .css extension.)
Embedded stylesheets (defined inside the HTML document, usually in the header, using tags. Sometimes called internal stylesheets.)
Inline styles (defined using the style= attribute inside the HTML tag itself and having an effect only on that particular element.)

This is also the order in which your browser reads the document. Just as you do...it moves from top to bottom, beginning with the browser's default setting. So the list above is the order in which it decides which rule "wins" any conflict. If nothing else defines the rules, the browser's default setting "win". However, if there is an external stylesheet, those settings "win" out over the browser's defaults. And so on down the list. As an example:

p {color: red; font-family: Comic Sans MS; }

This line should be yellow and in the Bradley Hand ITC font.

If you type the above code into an HTML document, you'll find that the text appears like this:

This line should be yellow and in the Bradley Hand ITC. font.

Even though the tag was defined with two conficting rules, CSS knows what to do. The inline style defined inside the tag is "closer" to the element than the one defined earlier for the tag in the embedded stylesheet above it, and so it takes precedence.

Coding Tip: It's possible to make CSS override even the normal rules of precedence. The use of !important can give any rule a higher value in the cascade...the "final say" (in effect). The syntax for using the !important rule is to include it immediately after the value in your declaration. For example, in the above example, if you add !important immediately after the word red, the browser will ignore the "yellow" definition in the inline style and the line will be red. Like this:

p {color: red !important; font-family: Comic Sans MS; }

This line should be yellow and in the Bradley Hand ITC font.

Making it look like this:

This line should be yellow and in the Bradley Hand ITC. font.

As you can see, the Bradley Hand font is still taking precedence over the embedded stylesheet's choice of Comic Sans MS, due to its proximity to the tag. However, in this example, the use of !important after the embedded stylesheet's color declaration causes the embedded stylesheet to override the inline style's color choice.

Note: I had to force the last line to be red in my code, because if I'd added the !important rule to the CSS code on this page it would have overridden BOTH lines. So, if you want to test the theory, you need to use the example codes rather than the code you'll see in the source code of this page.