Example 1: The Basics


Here's a simple example of cascading and inheritance in action. We begin with a simple HTML document:

 <HTML>   <TITLE>A sample document</TITLE>   <BODY>     <H1>The headline</H1>     <P>The text</P>   </BODY> </HTML> 

Then, we add two style sheets:

Browser's style sheet

Designer's style sheet

 BODY {                font-family: serif } 

 H1 {     font-family: sans-serif } 


Graphically, the document structure with style sheets attached looks like what's shown in Figure 13.2.

Figure 13.2. Style properties attached to elements.


CSS now must resolve differences between these style sheets. First, the cascading mechanism gets to work. For each element in the tree, rules are collected. In this example, no element has more than one rule for the same property, so no conflicts need to be resolved. After cascading, the document structure looks like what's shown in Figure 13.3.

Figure 13.3. Style properties attached to elements after cascading.


Next, the inheritance mechanism kicks in. The P element has no rule attached to it, so it inherits its parent's value. The document structure now looks like what's shown in Figure 13.4.

Figure 13.4. Style properties attached to elements after cascading and inheritance.


Because there are no conflicting rules in this example, combining the two style sheets only used the inheritance mechanism. In the next example, conflicts are introduced.



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