Document Structure and Inheritance

 <  Day Day Up  >  


XHTML documents have an implicit structure. They all have a root <html> tag. Within this, we find the head and body elements or, in the case of framed documents, <head> and <frameset> tags. We dub these tags "children" and the <html> tag would be the parent. We then find that children in turn contain other tags. For example, we might find a <title> tag within the head and a <p> tag within the body . The structure of the document looks somewhat like a family tree. For example, the document shown here would have a tree structure like the one shown in Figure 10-3:

click to expand
Figure 10-3: Simple document parse tree
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Test File  </title>   </head>   <body>   <h1>  Test  </h1>   <p>  This is a  <b>  Test  </b></p>   </body>   </html>  

In the example parse tree, note how the <b> tag is a child of the <p> tag, which is in the <body> , which is in the <html> tag. What happens if you set a style rule to p elements like so:

 p {color: red;} 

Would the contents of the <b> tag enclosed in the <p> tag also be red? The answer is yes, because the color is inherited from the parent element. Whereas most elements can inherit the style features of their parents, some style properties do not inherit. For example, consider setting the border property of the paragraph like so:

 p {border: solid;} 

If the enclosed <b> tag from the previous example inherited the border, you would expect to see something like this:

click to expand

However, this does not happen and the border is limited just to the paragraph itself. As the various CSS properties are introduced later in the chapter, important non-inheriting properties will be pointed out.

Assuming that a property does inherit, it is still possible to override the inheritance of a property. For example, consider the following two rules:

 p   {color: red; font-size: 14pt;} b   {color: yellow;} 

In this case, the color of the text within the <b> tag would be yellow and in 14 point. Both of the properties were inherited, but the color property was overridden by the color rule for the <b> tag, which is more specific.

The combination of multiple rules with elements inheriting some properties and overriding others is the idea of the cascade that CSS is named for. The general idea of the cascade, in effect, is that it provides a system to sort out which rules apply to a document that has many style sheets. For example, a rule for a specific <p> tag marked with an id attribute is more powerful than a class rule applied to <p> , which in turn is more powerful than a rule for the p element itself. Inline styles set with a style attribute are more important than a document-wide style or linked style. An easy way to think about which rule wins is to follow these helpful rules of thumb:

  • The more specific the rule, the more powerful.

  • The closer to the tag the rule, the more powerful.

So with these rules, we see that id rules are more specific than class rules and thus will override them. Inline styles are closer to tags than document-wide or external style rules and thus take precedence, and so on.

Tip  

There is an actual process to determine the specificity of a particular rule versus another by assigning numeric values to each rule, but if a designer requires such a careful analysis of the style rules to determine an end result, the style sheet is simply too complex.

!important Override

If a particular rule should never be overridden by another rule, the !important indication should be used. For a rule never to be ignored, insert the indication !important just before the semicolon of the rule. For example, to always set all paragraphs to red text you might use the following:

 p {color: red !important; font-size: 12pt;} 

Later on you might have a paragraph with an inline style such as this:

  <p style="color: green; font-size: 24pt;">  

In this paragraph, the text would still be red due to the inclusion of the !important indicator, although it would be larger because that rule was overridden as expected. A full example is shown here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Important Override  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!-- p {color: red !important; font-size: 12pt;} -->  </style>   </head>   <body>   <p>  A regular paragraph  .</p>   <p style="color: green; font-size: 24pt;">  This paragraph has  inline style for green text that is overridden.  </p>   <p style="color: green !important; font-size: 24pt;">  This inline  rule !important overrides the other rule.  </p>   </body>   </html>  

When using the !important indicator, make sure to always put it at the end of a rule; otherwise , it will be ignored.

Tip  

Many older CSS-aware browsers do not support the !important declaration properly.

Note  

Using !important to force a style can cause trouble with user -defined style sheets, so use this directive with caution.

Now that we've covered the basics of style sheet rules, it is time to turn our attention to the various style sheet properties. Before doing so, the next section shows a brief example using many of the ideas presented in the last few sections.



 <  Day Day Up  >  


HTML & XHTML
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
ISBN: 007222942X
EAN: 2147483647
Year: 2003
Pages: 252
Authors: Thomas Powell

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