The Cascade: When Rules Collide

There are many places to apply styles. As we saw back in Chapter 1, every browser has its own default styles (see page 42). Next, you can write style rules and apply them to a specific (X)HTML element right in the code, insert them at the top of an (X)HTML document, and import one or more from an external file (see page 127). And some browsers let your visitors create and apply their own style sheets to any pages they visitincluding yours. Finally, some styles are inherited from parent element to child.

Figure 7.5. Here is the style sheet for this document. Don't worry too much about the details right now, but do notice that there is a rule for p elements, but not for em elements.

What happens, you might ask, when there is more than one style rule that applies to a given element? CSS uses the principle of the cascade, from which it gets its initial C, to take into account such important characteristics as inheritance, specificity, and location in order to determine which of a group of conflicting rules should win out.

Figure 7.6. The em element is contained within the p element, and thus is a child of p.

Let's start with inheritance. Many CSS properties affect not only the elements defined by the selector but are also inherited by the descendants of those elements. For example, suppose you make all your h1 elements blue with a red border. It so happens that the color property is inherited, but the border property is not. Thus, any elements contained within the h1 elements will also be blue, but will not have their own red border. You'll learn which properties are inherited in the individual section describing each property (and in Appendix B, CSS Properties and Values). You can also use a value of inherit with most properties to force inheritance (see page 124).

Figure 7.7. In the absence of a rule specified explicitly for the em element in Figure 7.5, it inherits the font, weight, and color from its parent, the p element.

While inheritance determines what happens if no style rule is applied to an element, specificity is the key when more than one rule is applied. The law of specificity states that the more specific the selector, the stronger the rule. So if one rule states that all h1 elements should be blue but a second rule states that all h1 elements with a class of Spanish be red, the second rule will override the first for all those h1 elements whose class is Spanish.

Figure 7.8. Here are four rules of varying specificity. The first affects any old p element, the second affects only those p elements with a class equal to group, and the third and fourth affect only the single p element with an id equal to one.

Note that id attributes are considered the most specific (since they must be unique in a document), while the presence of a class attribute makes a selector more specific than a simple selector that has none. Indeed, a selector with more than one class is more specific than a selector with only one. Selectors with just element names come next on the specificity scale; inherited rules are considered to be the most general of all, and are overruled by any other rule.

Figure 7.9. Here are three paragraphs, one generic one, one with just a class, and one with a class and an id.

For the exact rules of calculating specificity, see Section 6.4.3 of the CSS specifications (http://www.w3.org/TR/CSS21/cascade.html#specificity).

Sometimes, specificity is not enough to determine a winner among competing rules. In that case, the location of the rule breaks the tie: Rules that appear later have more weight. For example, rules that are applied locally right in the (X)HTML element (see page 134) are considered to appear after (and thus have more weight than) equally specific rules applied internally at the top of the (X)HTML document (see page 131). For details, consult The Importance of Location on page 135.

Figure 7.10. Since the third and fourth rules have the same specificity, their position becomes a factorand thus the fourth rule wins out since it appears last.

If that isn't enough, you can override the whole system by declaring that a particular rule should be more important than the others by adding !important at the end of the rule.

In summary, in the absence of a rule, many styles are inherited from parent element to child. With two competing rules, the more specific the rule, the more weight or importance it hasregardless of its location. With two rules of equal specificity, the one that appears later wins.