The CascadeOK, now we have enough information to have a meaningful discussion about one of the toughest aspects of CSS to get your head aroundthe cascade. If this section gets to be too much, skip ahead and read the "Charlie's Simple Cascade Summary" sidebar later in this chapter. This sidebar is a simplified, if slightly less accurate, version that will serve you until you have done some CCS coding and really need the details. As its name suggests, the cascade in Cascading Style Sheets involves styles falling down from one level of the hierarchy of your document to the next, and its function is to let the browser decide which of the many possible sources of a particular property for a particular tag is the one to use. The cascade is a powerful mechanism. Understanding it helps you write CSS in the most economical and easily editable way and enables you to create that documents are viewed as you mean them to be seen, while leaving appropriate control of aspects of the document's display, such as overall font sizes, with users who have special needs. Sources of StylesStyles can come from many places. First, it's not hard to accept that there must be a browser style sheet (the default style sheet) hidden away inside the browser, because every tag manifests styles without you writing any. For example, h1 tags create large bold type, em tags create italicized type, and lists are indented and have bullets for each item, all automatically. You don't style anything to make this formatting happen.
If you have Firefox installed on your computer, search for the file html.css and you can then see the Firefox default browser style sheet. Modify it at your peril. Then there is the user style sheet. The user can create a style sheet, too, although very few do. This capability is handy, for example, for the visually impaired, since they can increase the baseline size of type or force type to be in colors that they can discern one from another. You can add a user style sheet to Internet Explorer for Windows by selecting Tools > Internet options… and clicking the Accessibility button. This capability, for example, enables visually impaired users to add a style like
body {font-size:200%}
that doubles the size of all typeinheritance at work again! This is why it is important to specify type in relative sizes such as ems rather than fixed sizes such as points, so you don't over-ride such changes. We will discuss this interesting topic more in Chapter 3. Then there are author style sheets, which are written by you, the author. We have already discussed the sources of these: linked style sheets, embedded styles at the top of pages, and inline styles that are attached to tags. Here's the order in which the browser looks at, or cascades through, the various locations:
The browser updates its settings for each tag's property values (if defined) as it encounters them while looking sequentially in each location. They are defined in the default browser style sheet and the browser updates any that are also defined in the other locations. If, for example, the author style sheet style defines the <p> tag's font-family to be Helvetica but the <p> tag is also specified to be Verdana in an embedded (page) style, the paragraph will be displayed in Verdanathe embedded styles are read after the author style sheet. However, if there is no style for paragraphs in the user or author style sheet, they will display in Times, because that's the style defined in all browser default style sheets. That's the basic idea of how the Cascade works, but in fact, there are several rules that control the Cascade. The Cascade RulesIn addition to the order in which styles are applied, you should know several rules about how the cascade works.
Cascade Rule 1: Find all declarations that apply to each element and property. As it loads each page, the browser looks at every tag in the page to see if a rule matches it. Cascade Rule 2: Sort by order and weight. The browser sequentially checks each of the five sources, setting any matched properties as it goes. If a matched property is defined again further down the sequence, the browser updates the value and does this repeatedly, if necessary, until all five possible locations of properties for each tag in that page have been checked. Whatever a particular property is set to at the end of this process, that's how it is displayed. In Table 2.1, we look at this process for a page with numerous p tags. Let's assume, for the sake of the example, that two of those p tags have inline styles that define their color as red.
In this case, every p tag text is blue, except for ones with the inline color attributethese are red. Of course, things aren't quite that simple. There is also the weight of the declaration. You can define a rule as important, like this
p {color:red !important; font-size:12pt} <-- a
The word !important follows a space after the style you want to make important but before the ; (semicolon) separator. This style defines the text's red color as important, and therefore, it displays this way, even if it is declared as a different color further down the cascade. Think hard and long before you force a particular style on the user with !important rule definition, because you may be messing up someone's personal style sheet, which may be set that way for a very good reason; be sure that it truly is important for such a style to dominate over any other possible style for that tag.
Cascade Rule 3: Sort by specificity. Besides being very hard to pronounce, specificity determines just how specific a rule is. I tried to get you started on this idea by using the word specific in exactly this way many times while we were discussing selectors. As you saw, if a style sheet contains this rule
p {font-size:12px;}
and this rule
p.largetext {font-size:16px;}
then this markup <p class="largetext">A bit of text</p> displays text 16 pixels high because the second rule is more specificit wins. This may seem intuitively obvious, but what happens to that bit of markup if you use these styles instead?
p {font-size:12px}
.largetext {font-size:16px}
Both these rules match the tag, but the class wins out and the text is 16 pixels. Here's why: the numeric specificity of the tag selector is 1, but the class has a specificity of 1-0. Here's how to calculate the specificity of any selector. There is a simple scoring system for each style that you plug into a three-value layout like this: A - B - C The dashes are separators, not subtraction signs. Here's how the scoring works:
So, let's look at the specificity of these examples
p {color:red} <-- a
p.largetext <-- b
p#largetext <-- c
body p#largetext <-- d
body p#largetext ul.mylist <-- e
body p#largetext ul.mylist li <-- f
Each example is a higher specificity that the previous one. Cascade Rule 4: Sort by order. If two rules have exactly the same weight, the one furthest down the cascade wins.
And that, dear reader, is the cascade and, yes, it is somewhat hard to understand, especially if you have not yet had much experience with CSS. So I now offer you my simplified version of the Cascade rules, which applies in about 98 percent of cases. If you find that something isn't behaving the way you want when you're using this simplified version, refer to the above rules. |
Cascade</p>
</div>
