|
June 17, 1998
 |
 |
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>
|
- item one
- item two
- item three
|
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>
|
- item one
- item two
- item three
|
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>
|
- item one
- item two
- item three
- item one
- item two
- item three
|
|
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>
|
| Table Cell 1 |
Table Cell 2 |
Table Cell 3 |
|
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>
|
bold paragraph
italic text
|
To turn off the navy blue text within the table above,
I closed the P element.
Additional Resources:
Methods of Combining The Style Sheet With HTML
Putting Style Sheets in Perspective: Table of Contents
Summary Part One
|
