200 Affordable Web Site Templates, software, and scripts Like This at Webmasters Profit Pak
Using Web Templates for Web Design: Tips and Best Practices--Style Sheets
Why Cascading?
The "cascading" of CSS is what makes this type of style sheets so powerful. Much like "inheritance" multiple
style sheets may be applied to a single document. The "cascade" determines which one take precedence.
Three types of style sheets might be available for a single document:
- Browser/Application
Netscape, Internet Explorer, etc. all use internal style sheets to format or present your HTML
- User
In later versions of browsers, the option exists for users to have/setup their
own style sheet
- Designer/Author
The style sheet used in the HTML document
In the current "cascade model," the Browser Style Sheet is overridden
by the User Style Sheet which is, in turn, overridden by the Designer's
Style Sheet. However, the important concept to remember is that elements
from all three levels are combined to determine the final style sheet. Settings
that are not specified by User or Designer may still be coming
from the default Browser style sheet.
In this case the Browser style sheet sets H1 to 150% size, bold and normal:
h1 { font-size: 150%; font-weight: bold;
font-style: normal; font-face: "Times New Roman", serif; }
And the User style sheet sets H1 to 125%:
h1 { font-size: 125%; }
Finally, the Designer style sheet sets H1 to 135% and italics:
h1 { font-size: 135%; font-style: italic; }
The only property that carries over from the Browser style sheet is the
"bold" font-weight value. The size was overridden, using the cascade order,
first by the User and then by the Designer. Finally, the font-style of Italics
was added, also by the designer. The final combined style would be:
h1 { font-size: 135%; font-style: italic; font-weight: bold; }
The cascade also applies to multiple styles sheets applied to the same document.
For instance, a document may have a Linked Style Sheet, an
Embedded Style Sheet, as well as a few Inline Styles.
If there were conflicting styles:
- Embedded style rules would take precedence over any Linked
style rules
- Inline style rules would take precedence over both Linked
and Embedded style rules.
