Chapter 13. Cascading and Inheritance

CSS is sometimes referred to as a style sheet language because the most visible part of CSS is the language in which one expresses style sheets. However, a major part of CSS is the mechanism that interprets style sheets and resolves conflicts between rules. All browsers that support CSS are required to use the same mechanism for this. The mechanism has two main parts: cascading and inheritance.

Inheritance was introduced in Chapter 2, "CSS," where we briefly described cascading. However, we left out the technical details of how inheritance and cascading work. We present those in this chapter. You do not need to understand this chapter in detail to use CSS productively, but if you ever wonder why one rule wins over others, you will find the answer in this chapter.

Cascading refers to the cascade of style sheets from different sources that may influence the presentation of a document. Style sheets come from the browser and the designer and may come from the user. The cascading mechanism is designed to resolve conflicts between these style sheets. Compared to other style sheet proposals, CSS is traditional in the stylistic properties it supports. However, as far as we know, cascading is unique to CSS.

The mechanism used now is not the first devised for CSS. The first published CSS proposal described a cascading mechanism that tried to combine conflicting rules to reach a median result in a process called interpolation. If a designer wanted, for example, headlines in sans-serif fonts while a user preferred serif fonts, the result would be something in between (fonts like this do exist). Interpolation didn't always work, however. For example, if a designer wanted fully justified text (text-align: justify) while a user wanted left-aligned text (text-align: left), there was no acceptable median alternative. So, the interpolation of values was dropped at an early stage while the concept of cascading remained.

The current cascading mechanism always chooses only one value. That is, when more than one style sheet rule tries to set a certain property value on a certain element, the cascading mechanism picks one of the rules. The selected rule is given full control of the value in question. The challenge is to pick the right rule. This is not always easy, because conflicts can appear in several areas:

• Designer style sheets versus user style sheets The most articulated conflict, and certainly the most political one, is the one between users and authors. Designers that come from a paper-based environment are used to having full control over the presentation of information. However, on the Web, users expect to have a say in how documents are presented. CSS supports the users' position by allowing user style sheets.

• User style sheets versus browser style sheets Each browser has a built-in style sheet that is also part of the cascade. The default style sheet ensures that there is always a description of how documents are to be presented.

• Conflicting rules set on the same element Different rules in the same style sheet may set conflicting values on the same element/property combination.

• Added weight given to certain rules Designers and users can increase the weight of certain rules. These then escape the normal cascading order.

The inheritance mechanism is used only when no rules in any of the style sheets in the cascade try to set a certain property value. The property value will then be inherited from the parent element. The initial value will be used instead if the property does not inherit, (Most properties do inherit.)

The difference between cascading and inheritance can be illustrated graphically using a variation of the now familiar tree structure. In Figure 13.1, inheritance works vertically. That is, values are inherited from parent elements to child elements as described in Chapter 2. Cascading, in contrast, works horizontally. All rules that apply to an element, no matter what style sheet they come from, are collected and subsequently sorted. In the cascading order, rules coming from the browser default style sheet have the lowest priority, followed by user style sheets and designer style sheets (see Figure 13.1).

Figure 13.1. Cascading is horizontal; inheritance is vertical. Inheritance moves values from parent elements to child elements. Cascading collects rules that apply to the same elements. The "cascade" moves from left to right: The right-most style sheet has the highest weight.

If you don't fully grasp the differences yet, don't worry. The following examples demonstrate how cascading and inheritance work.