: The Basics





: 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.

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.

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.

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.


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows