April 18, 2011, 9:34 a.m.
posted by vlada
: 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:
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.