The scene is set for battle. Let's say there are three different stylesheets rules at work and all of them use P as the selector. An imported stylesheet tells the browser to display <P> text in red. An embedded stylesheet tells the browser to use blue. And an inline stylesheet tells the browser to use yellow.
What's a poor Web browser to do?
Thankfully, browsers that support stylesheets have a built-in cascading order of rules that instructs them what to do in these kinds of situations. Ultimately, some kinds of stylesheets rules are more important than others. According to the official specification of cascading stylesheets, here is the order of importance:
- Inline styles
- Embedded styles
- Linked styles
- Imported styles
- Default browser styles
So inline styles override embedded styles, which override linked styles, and so on. It's nice and elegant, right? Not so fast. Unfortunately, Netscape and Microsoft have been slightly less than perfect in implementing this order in their browsers. If I apply styles to the same selector using all these methods, then the browsers get it right and treat inline styles as most important, embedded styles as next-most important, and so on.
But if my styles are applied to different selectors and inheritance is involved, all hell breaks loose. For example, both browsers give more importance to linked styles than embedded styles. For now, your best bet is to stick with one method of adding styles to Web pages, especially when you're sure that stylesheet rules will conflict.
But even if this cascading order worked perfectly, we would still have a problem. What happens when multiple rules of the same kind conflict? What happens, for example, if one embedded rule declares <P> text green and another embedded rule declares it red?
Thanks to the wise sages who wrote the stylesheets specification, there's an order for solving these conflicts too. It's complicated, but here's an oversimplified guide to what browsers check for:
- Use the one stylesheets rule that's specifically declared.
Example:
BODY { color: green }
P { color: red }
<P> text is specifically declared red by one rule, but it also inherits the green value from the <BODY> rule. (If you give <BODY> a declaration, everything on the entire page inherits it.) In this situation, the specific rule outweighs the inherited value, so red wins out.
- Use the one stylesheets rule that's inherited.
If step number one doesn't result in a winner (i.e., if there's no rule that's specifically declared or if there are multiple rules that are specifically declared), the browser moves on to this step. The browser looks for an inherited rule and uses one if it finds one. If it finds none or if there are multiple inherited rules, the browser moves on to step number three:
- Use the stylesheets rules in the order they appear in the code.
Example:
P { color: green }
P { color: red }
When all else fails, the browser resorts to using the order in which the rules appear. In the above example, <P> text would display in red because it's the last rule given.
Note: The official cascading stylesheets specification goes into a lot more detail about this cascading order, including other concepts of importance and specificity, but since those are not well supported by the major browsers, I won't bother to go into them here.
One final question: What happens when stylesheets rules collide with HTML tags? Take a look at this example:
I { font-family: impact }<P>I think <I><FONT FACE="Times">East of Eden</FONT></I> is Steinbeck's best novel.</P>
The stylesheets rule tells the browser to use Impact, but the familiar HTML <FONT FACE> tag demands Times. It's an obvious conflict.According to the official stylesheets specification, stylesheets should win out. Only if there are no applicable CSS rules should the browser use the HTML tag instead.
Unfortunately, the major browsers aren't built this way. Netscape Communicator and Internet Explorer both treat HTML tags as more important than stylesheets rules if the HTML is closer to the affected text. Sigh.
As you can see, there are all sorts of problems with the browsers' support of stylesheets. Let's get the bad news over with.
next page»
