Using Inheritance

You might have noticed that although the <U> element in the previous examples specified only one aspect of the element's stylethat is, that text should be underlined (by using this rule: U {text-decoration: underline} )the underlined text appeared in the same font as the surrounding text, as you see in Figure 9-7. The reason is that styled elements inherit the styles of their parent elements. In this case, the <U> element's parent element is <P> :

 <?xml-stylesheet type="text/css" href="ch09_02.css"?>  <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>  From my grandfather, <U>Verus</U>, I learned good morals  and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT> 

Inheritance is very useful because, as you see, you don't have to specify all aspects of a child element's style if you want it to retain those aspects from the parent element. When you want to override some aspects of a style from the parent's style, you just need to define them in a rule for the child element.

Because style rules can inherit other rules, the order in which rules are applied becomes important. This ordering process is called a style cascade, which is where Cascading Style Sheets take their name .