Putting Style Sheets in Perspective Inheritance

To avoid a multitude of frustration, you'll need to understand the tree structure and inheritance, and how they relate to Style Sheets. Should be easy... right? We all know HTML and how the elements relate to each other...... but do we ? Once you're faced with Style Sheets, things can look a whole lot different, especially when your style is lost after you insert a table or a list.

Your document will take on the stylistic values set in the BODY declaration unless other selectors and rules are added to the style sheet. General rules, such as that specified by the BODY declaration will be over ridden by more specific rules such as P.

A child element is one contained within another, which is the parent, so in

<p> ... <b> ... </b> ... </p>

P is the parent and B is the child.

The following examples on this page will be based on this style sheet:-

<STYLE TYPE="text/css">
BODY	{color:		#9966FF;
	background:	#FFFFCC;
	font-family:	Arial;
	}
P	{color:		navy}
UL	{color:		maroon }
TD 	{color: 	green}
</STYLE>

The UL Selector in the style sheet specifies that unordered lists should be maroon, therefore all LI elements will take on the color specified unless it is overridden by inheritence.

<UL>
<LI>	item one
<LI>	item two
<LI>	item three
</UL>

In the example above, the UL Selector in the style sheet specified that the list items should be maroon. They inherited the Arial font from the BODY Declaration, the maroon color from the UL Declaration. Had a font-family been specified in the UL declaration, it would have over ridden the BODY selector declaration.

There is no OL selector in the style sheet, therefore the OL list inherits it's attributes from the BODY selector. (Remember, lists and paragraphs are both children of BODY; the list will not inherit the attributes of the P selector).

<OL>
<LI>	item one
<LI>	item two
<LI>	item three
</OL>

Placing the same two lists into a table produces one maroon list, and one green one. How come the OL list turned green? Inheritance is the answer. Once the OL list was moved to the inside of a table it took on the color value set in the TD Declaration. So, how come the maroon list didn't turn green? The UL selector in the style sheet is more specific than the TD selector since the list is contained inside of the table.

<TABLE BORDER=1>
<TR><TD>

<UL>
<LI>	item one
<LI>	item two
<LI>	item three

</UL>

<OL>
<LI>	item one
<LI>	item two
<LI>	item three
</OL>

</TD></TR>
</TABLE>

The cells in the table below are displaying the green text specified in the TD declaration. Notice though, that placing a P element inside of a table cell over rides the TD color value, replacing it with the P selectors color value.

<CENTER>
<TABLE border=1><TR>
	<TD>Table Cell 1</TD>
	<TD>Table Cell 2</TD>
	<TD><P>Table Cell 3</TD>
</TR></TABLE>
</CENTER>

Elements that are not included in the style sheet as selectors will inherit the properties of their parent element. In the example below, the B and I elements are inheriting the properties of the P selector.

<P>
  <B>bold paragraph</B><BR>
  <I>italic text</I><BR>
</P>

Additional Resources:

• W3C: 6.2 Inheritance

Methods of Combining The Style Sheet With HTML
Putting Style Sheets in Perspective: Table of Contents
Summary Part One