Cascade, Inheritance, and Specificity

One of the powers of style sheets is that there is a hierarchy of relationships. These relationships are defined by the concepts of cascade, inheritance, and specificity within the language of CSS.

About the Cascade

Cascade refers to the method by which conflicts between style rules are resolved. As you’ve seen, multiple sheets and types of sheets can be used, each applied one after another. This creates a hierarchy of application. What’s more, multiple rules can be applied, and which order these types of sheets and rules are interpreted by the browser relies on the concept of the cascade.

In terms of types of style sheets, you can combine inline, embedded, and linked styles, or any number of individual types of style sheets, for maximum control. Say you have a large site that you’re controlling with a single style sheet. Now say you have a page on which you want to alter some of the styles. No problem. You can place the modified style as an embedded sheet within the individual page. The browser will first look for the embedded style and apply that information.

You also can override both styles by adding an inline style. When all three forms are in place, the CSS-compliant browser looks for inline style first, then the embedded style, and then the linked sheet; it reads the information in that order. But what happens if you have conflicting rules? The cascade exists to deal with that problem as follows:

  1. User agent styles (base styles defined within the web browser) are default.

  2. External style sheets will override user agent styles.

  3. Embedded style sheets will override external style sheets and user agent styles.

  4. Inline style sheets will override all.

Note 

 An exception is if the author marks a given rule as !important. In CSS2, any rule containing this demarcation overrides any other rule anywhere in the cascade.

To show how conflicts are resolved by the cascade, I created a document with an embedded sheet and inline styles in Listing 2.7.

In this case, one concept of cascade can be seen in action: the inline h1 style takes precedence over the embedded h1 style (see Figure 2.4).

click to expand
Figure 2.4: Resolving conflicts within the cascade.

Listing 2.7:  WWW.   Conflicts between Style Sheets

start example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Combination Style Sheet Example</title> <style type="text/css" media="all"> h1  {      font: .85em Verdana;      color: blue; ) p  {      font: .95em Verdana; } </style> </head> <body> <h1 style="font-family: Times; font-size: .95em;"> Aftermath</h1> <p><em>Henry Wadsworth Longfellow </em></p> <p>When the summer fields are mown,<br />   When the birds are fledged and flown, <br />  And the dry leaves strew the path;<br />   With the falling of the snow,<br />   With the cawing of the crow,<br />   Once again the fields we mow<br />   And gather in the aftermath.  </p> <p> Not the sweet, new grass with flowers<br />   Is this harvesting of ours;<br />   Not the upland clover bloom;<br />   But the rowen mixed with weeds,<br />   Tangled tufts from marsh and meads,<br />   Where the poppy drops its seeds<br />   In the silence and the gloom.</p>  </body> </html> 

Another example of a cascade concept within CSS is the use of multiple external sheets in the same document:

<head> <link rel="stylesheet" type="text/css" href="molly1.css" /> <link rel="stylesheet" type="text/css" href="molly2.css" /> <link rel="stylesheet" type="text/css" href="molly3.css" /> </head>

If there are conflicts between rules (as shown in Listing 2.6), the last style sheet in this list will first apply any styles that aren’t in the middle one, and the middle one will then apply any styles that aren’t in the first one. And, as mentioned earlier, any imported style sheets must come first in the hierarchy to be properly interpreted.

end example

Inheritance

Other factors influence the way CSS rules apply. One predominant concept is inheritance. Inheritance relies on the document tree, which defines specific elements as ancestral and descendant, depending on where in the structure they exist.

The body element contains other markup that describes the way the content of the page is displayed: headers, paragraphs, lists, images, and so on. All elements within the body are considered descendants of the body element.

This concept continues down the tree hierarchy. Think of it as a family tree, in fact. If you have a paragraph, the elements directly descended from that paragraph are the children of that parent, and so on. This system is referred to as containment hierarchy.

Inheritance claims that unless you specify differently, a style will be inherited by the child of a parent. For example, if you write a style asking that a specific text color be applied to a paragraph, all tags within that paragraph will inherit that color unless you state otherwise. So, if you write:

<p style="color: blue">Speaking of style, I bought the <em>best</em> pair of shoes in Las Vegas.</p>

The entire paragraph will appear in blue (see Figure 2.5), even the content within the em element because, in this case, that element is a child of the parent element, p.

click to expand
Figure 2.5: The child element inherits from the parent.

There are two exceptions to inheritance. The first is any technical exception within the specification, and the second is, of course, any failure on a web browser’s part to properly interpret inheritance.

Technical exceptions include such CSS properties as related to the box model (where every element can generate a box; see the “Understanding Visual Models” section later this chapter): margins, padding, backgrounds, and borders. This is not an oversight of the specification, it’s an intentional exception. In the parent-child example above if a margin property had been set for the paragraph, the emphasis element would conceivably inherit that margin, adding unwanted visuals to your pages and forcing you to write more rules to undo what inheritance would do in that context. Thus CSS prevents some properties, like those that set margins, from inheriting.

Browser exceptions are naturally the most frustrating inheritance exceptions. Writing your CSS based upon the proper structure of documents can help you avoid problems with inheritance because you will have a clear idea of which elements exist within the tree and what their relationships are.

Specificity

Yet another component of CSS that works to resolve conflicts within rules is specificity. Specificity explains the importance (also referred to as weight) of a given rule within a style sheet.

Specificity is broken down by selector types. Selectors are described in greater detail in the “Exploring CSS Grammar” section later this chapter. Different kinds of selectors are given different kinds of weight within CSS. An id, for example, carries more weight than a simple selector such as p. That means that any rule relating to the id will have higher specificity than the rule pertaining to the p, and if there are any conflicts between the style rules for id and p, the rule related to id, having greater weight, will be the style that is applied.

Note 

 Inherited values have no specificity at all, not even a specificity of zero. This automatically means that any rule you write for an inherited value has more weight than the inheritance. If I wrote a rule for the child element em in the example in this section, that rule would override the inherited styles from the parent element p.



Cascading Style Sheets(c) The Designer's Edge
ASP.NET 2.0 Illustrated
ISBN: 0321418344
EAN: 2147483647
Year: 2005
Pages: 86

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net