Example 4: A More Complex Example


In this example, we follow the steps a browser goes through to find the value of a certain property for a certain element. The numbered steps correspond to the definition of cascading in the CSS1 specification.

We will use a slightly more complicated sample HTML document:

 <HTML>   <TITLE>A sample document</TITLE>   <BODY>     <H1 CLASS=first ID=x45y>The headline</H1>     <P>The text   </BODY> </HTML> 

Also, the involved style sheets are more elaborate than the earlier ones. They are written to demonstrate the specifics of the cascading and inheritance mechanisms.

Designer's style sheet:

 1  H1 { letter-spacing: 1em } 2  H1.initial { letter-spacing: 2em } 3  #x45y { letter-spacing: 3em } 4  #x45y { letter-spacing: 4em } 

User's style sheet:

 5  BODY H1 { letter-spacing: 3em } 6  H1 { letter-spacing: 1em } 7  BODY { letter-spacing: 1em } 8  H1 { word-spacing: 1em } 

The goal is to find the value of the letter-spacing property for the H1 element. This involves several steps. The search ends when the one specific rule is found that will set the value.

Step 1: Find All Rules that Apply

We begin by going through the rules in the style sheet examples and identifying the ones that apply:

  • Rule 1 A simple selector that matches all H1 elements. We are looking for the value of letter-spacing on an H1 element, so the rule applies.

  • Rule 2 The selector is more complex. It matches H1 elements, but only those that are of class "initial." The element in question is of class "first," so the selector does not match and the rule does not apply. Note that class matching is based on a comparison of the class names. The fact that "first" and "initial" are synonyms isn't important.

  • Rule 3 The selector looks for an element with a certain ID attribute. The element in question has an ID attribute with a matching value, so the rule applies.

  • Rule 4 Same as rule 3: The ID selector matches the element in question, so the rule applies.

  • Rule 5 The selector is contextual. It matches only if the element in question has a BODY element as an ancestor. This will always be the case in HTML, so the rule applies.

  • Rule 6 This rule is similar to rule I except it comes from the user's style sheet, not the designer's. The selector matches for the same reason rule I's selector matches.

  • Rule 7 This rule tries to influence the property in question, but the selector is BODY, so the rule does not apply.

  • Rule 8 This rule has the same selector as rules 1 and 4, so it applies to the element in question. However, it sets a value for another property (word-spacing), so we ignore it.

Here's the situation after the first step. If a rule is marked like this, it means that it doesn't apply.

Designer's style sheet:

 1  H1 { letter-spacing: 1em } 2  H1.initial { letter-spacing: 2em } 3  #x45y { letter-spacing: 3em } 4  #x45y { letter-spacing: 4em } 

User's style sheet:

 5  BODY H1 { letter-spacing: 3em } 6  H1 { letter-spacing: 1em } 7  BODY { letter-spacing: 1em } 8  H1 { word-spacing: 1em } 

If no rules had applied, the inherited value would have been used. That is, the inheritance mechanism is only used if there is no applicable rule. This demonstrates that the cascading mechanism is stronger than inheritance.

Step 2: Sort the Rules by Explicit Weight

Rules can be given extra importance by labeling them !important. None of the remaining sets of rules in the example are labeled, so this step has no effect on the cascading order. If a rule did have this label, it would have won the competition, and the rule we seek would have been found.

Step 3: Sort by Origin

Although CSS allows both designers and users to submit style sheets, users are usually happy to accept the designer's style sheet. This assumption is reflected in this step: Designer style sheets are given a greater weight than user style sheets. (As described in Example 3, however, users have ways to circumvent this.) Accordingly, because there is a rule from the designer that applies, the remaining user's rules can be dismissed. Here is the result:

Designer's style sheet:

 1  H1 { letter-spacing: 1em } 2  H1.initial { letter-spacing: 2em } 3  #x45y { letter-spacing: 3em } 4  #x45y { letter-spacing: 4em } 

User's style sheet:

 5  BODY H1 { letter-spacing: 3em } 6  H1 { letter-spacing: 1em } 7  BODY { letter-spacing: 1em } 8  H1 { word-spacing: 1em } 

Step 4: Sort by Specificity

We now try to find the most specific rule among those remaining. The principle is that a specific rule (for example, one that targets a specific element) should win over a more general rule that applies to a large number of elements.

CSS computes the specificity of a rule based on the rule's selectors. A selector that addresses all elements of a certain type (for example, all H1 elements) is considered general. This is the case with rule 1. Rules 3 and 4, however, apply only to one element (because the ID attribute is guaranteed to be unique across the document), so their specificity is higher.

In general, the rule of specificity says that any selector with an ID is more specific than any selector without; and any selector with a class selector, attribute selector, or pseudo-class is more specific than a selector with only type selectors (see Chapter 4, "CSS Selectors").

Furthermore, a selector with two class selectors (for example, P.sum EM.name) is more specific than a selector with only one class selector (for example, EM.name); and two type selectors (for example, P EM) is more specific than only one (for example, EM).

(For the exact formula for computing the specificity of a selector, see the CSS specification.)

We now have two rules left.

Designer's style sheet:

 1  H1 { letter-spacing: 1em } 2  H1.initial { letter-spacing: 2em } 3  #x45y { letter-spacing: 3em } 4  #x45y { letter-spacing: 4em } 

User's style sheet:

 5  BODY H1 { letter-spacing: 3em } 6  H1 { letter-spacing: 1em } 7  BODY { letter-spacing: 1em } 8  H1 { word-spacing: 1em } 

Step 5: Sort by Order Specified

Finally, we sort rules by the order in which they are specified. The later a rule is specified, the more weight it is given. Rule 4, therefore, has a higher weight than rule 3 and can be declared the winner: The H1 element will have a letter-spacing of 2em.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

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