Example 2: Conflicts Appear


The following example demonstrates how CSS resolves conflicts between designers and users:

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

Two style sheets try to influence the presentation of the document:

User's style sheet

Designer's style sheet

 BODY {  color: black;  background: white } 

 BODY {  color: white;  background: black } 


(Although the browser's default style sheet will always be there as well, we omitted it to simplify the example.)

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

Figure 13.5. Style properties attached to elements before cascading.


As you can see, both the user and the designer are trying to set the color and background for BODY, so the rules conflict. CSS first applies the cascading mechanism. The following principle resolves the conflict: Designer style rules override user style rules.

(Some people think that this rule is unfair. Read on. We offer two alternatives in the next example.) Hence, after cascading, the document looks like this (see Figure 13.6).

Figure 13.6. Style properties attached to elements after cascading.


Next, CSS applies the inheritance mechanism. The color property inherits, but the background property is among those that don't. So, the background's initial value transparent will be used (see Figure 13.7).

Figure 13.7. Style properties attached to elements, after cascading and inheritance.


The background of the parent element shows through the transparent background, thereby producing, in effect, the same result as would inheritance. In this example, both the H1 and P elements appear to have black backgrounds.



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