Document Structure and Inheritance | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

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

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  tag is a child of the  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  tag enclosed in the  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  tag from the previous example inherited the border, you would expect to see something like this:

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  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  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  tag marked with an id attribute is more powerful than a class rule applied to  , 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 >