| Within a single Web page, style sheets may be linked, imported, or embedded. Styles may also be declared inline, in the HTML. In addition, many browsers allow visitors to have their own style sheets, which they can use to override yours. It's guaranteed, of course, that style sheets from two or more sources being used simultaneously will have conflicting declarations. Who comes out on top? The cascade order refers to the way styles begin at the top of the page and, as they cascade down, collect and replace each other as they are inherited. The general rule of thumb is that the last style defined in order is the one that is used. For example (Figure 2.55), you might define the color of the heading level 3 tag to be blue in an external style sheet (Code 2.31 and Code 2.32), replace that declaration with the color lime in an embedded style, and then finally trump them all with an inline style that sets the color to red. Figure 2.55. Despite having the color set to blue and lime in previous style declarations, the final inline style wins out and the text is red. 
Code 2.31. default.css: The external style sheet sets the <h2> tag to be blue. Code 2.32. index.html: The embedded style sheet sets the <h2> tag to lime, while the inline style sets the <h2> tag to red.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Determining Cascade Order</title> <link href="default.css" rel="style sheet" type="text/css" media="screen" /> <style type="text/css" media="screen"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; color: #000000; background-color: #fff; margin: 8px; } h2 { color: lime; } </style> </head> <body> <div > <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2 style="color:red">Chapter VI<br /> <span >Pig and Pepper</span> </h2> </div> <div > <p>For a minute or two she stood looking at the house, and wondering what to do next,  when suddenly a footman in livery came running out of the wood...</p> </div></div> </body></html>
|
However, there will be times when two or more styles will come into conflict. Use the steps below to determine which style will come out on top and be applied to a given element. To determine the cascade-order value for an element: 1. | Collect all styles that will be applied to the element.
Find all of the inherent, applied, and inherited styles that will be applied to the element for the target media type (see the previous section).
| 2. | Sort by origin, method, importance, and selector.
Use the chart in Figure 2.56 to determine the importance of a rule, based on who added it (origin), where it came from (method), and the type (selector).
Including !important with a declaration gives it top billing when being displayed (see "Making a Declaration !important" earlier in this chapter).
Figure 2.56. This chart shows the relevant importance of where particular rules come from when determining their cascade order. 
Many browsers let users define their own style sheets for use by the browser. If both the page author and the visitor have included !important in their declarations, the user's declaration wins.
In theory, an author's style sheets override a visitor's style sheets, unless the visitor uses the !important value. In practice, however, most browsers favor a user's style sheet when determining which declarations are used for a tag.
| | | 3. | Is the selector more specific?
The more contextually specific a rule is, the higher its cascade priority. So the more HTML, class, and ID selectors a particular rule has, the more important it is. In determining this priority, ID selectors count as 100, classes count as 10, and HTML selectors are worth only 1. Thus,
#copy p b { color: red; }
would be worth 102, while just
b { color : lime; }
would only be worth 1. So if these two declarations were in conflict, the first would have higher specificity and the color would be red.
This priority setting may seem a bit silly at first, but it allows context-sensitive and ID rules to carry more weight, ensuring that they will be used.
| 4. | Last one in the pool wins.
If the conflicting declarations being applied to an element are equal at this point, then CSS gives priority to the last rule listed, in order. This is especially useful if you include an inline declaration to override style settings listed in the head.
|
|
