Style Sheets Guide
=What 'Cascading' Means=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
How Style Sheets Cascade
The section on Style Sheet Syntax described the three
methods used to specify style information in HTML documents. Mention was also made of
levels of distance or "abstraction layers" of styles in the document. In addition
to the methods listed, a user may specify their own general style sheet as well. When style
information is specified for a single document at more than one of these levels , and is in direct
conflict, what should happen? These "cascading" abstraction levels help define
how to resolve such conflicts. A document can have styles specified in many locations,
but all the information is reduced to a single, cohesive "virtual" Style Sheet.
There are, of course, strict rules as to how style information conflicts will be resolved to
create this virtual Style Sheet.
General Cascading Order
This is a quick reference to resolving style conflicts. If multiple styles are in conflict, the
scales shown below are used to determine which of these styles will be used. A style with higher
importance will win over a style with lower importance.
[Note: the last scale mentions "Contextual Selector
Quantity" - this refers to the nesting complexity of the tag selector. A simple contextual
tag selector (the normal specification method) of 'em' would have a lower importance than a
'h1 em' contextual selector would. This in turn would have a lower importance than a class
selector: 'em.test', etc.]
|
|---|
| Lowest
Importance |
<=======================> |
Highest
Importance |
|
|
|---|
| Ownership: | Browser
Defaults |
Reader's
Style Sheet | Author's
Style Sheet |
|
|
|---|
Abstraction
Level: | Linked
Style Sheet |
Document Level
Style Sheet | Inline
Styles |
|
|
|---|
Tag
Selector
Specificity: |
Contextual
Selector
Quantity |
CLASS | ID |
|
|---|
Yet More Details: The '!Important' Flag
Style sheet designers can increase the weights of their style assignments using the keyword
"!important" This allows the author to change the inherent importance level
assigned to the style.
- Example:
- h1 { color: red
! important }
- p { font-size: 12pt
! important }
- Note:
- - An important reader rule will override an author rule with normal weight.
- - An important author rule will override an important reader rule.
Calculating an Exact Cascade Order
There is a much more precise algorithm that browsers should use when determining Cascade
Order. It is very complex and probably not of great use to the general reader or author. To find
out more about this algorithm, please see the section on
Cascading
Order in the CSS1 Specification.
Boring Copyright Stuff....