|
200 Affordable Web Site Templates Like This at Webmasters Profit Pak
Using Web Templates for Web Design: Tips and Best Practices--Style Sheets
HTML Hierarchy and Inheritance
The HTML document structure employs a hierarchy using the parent-child model.
For the purposes of CSS the hierarchy serves to determine what stylistic properties
the "child element" will inherit from the "parent element." A fairly typical
inheritance model is shown below.
HTML
/ \
HEAD BODY
/ / | \
TITLE H1 P OL
| / | \
STRONG LI LI LI
Following this model, any properties set for the <BODY>
element would inherit down to all children (in the above model, to H1,
STRONG, P, UL, and LI). If text COLOR were
set to "red" and FONT-FACE were set to "Arial," those settings
would affect all elements hierarchically under <BODY>. Likewise,
all styles set for the <P> element would inherit to all elements
hierarchically within the "paragraph" (with the exception of the <A>
"anchor" element which does not inherit, but instead has its own special style
settings). You may have actually been aware of this behavior within your document
"before styles," but you will need to be more actively aware of inheritance
when trying to debug your styles.
Overriding Parent-Child Inheritance
It is possible to override the natural hierarchical inheritance of HTML by applying specific styles to "child"
elements that differ from what is inherited from the "parent." For instance, if you set the text COLOR to
"black" for the <BODY> element, naturally all text would be black within the body of the
document. However, if you wanted <H1> to be "blue" and <H2> to be "green" and "italics" you could write separate style statements for H1 and H2 which
would override the natural inheritance from <BODY>. If I inherited "red hair" from my
mother, I could override it by dying my hair "black," but all of my siblings might still have red hair, or they might choose
to dye their hair another color.
|
