CSS Cascading Rules
A varity of style sheets can be associated with a particular web page. The browser reads all of the styles and they then cascade into one style sheet. Sometimes there are conflicts between separate styles sheets or even within one style sheet, the cascading rules define which elements take precedence over others.
Cascade Rule One
Find all the declarations that apply to each element and property. As each page loads the browser checks every tag on the page to see if a rule matches it.
If there are any conflicts in your css
an ID will win out over a class
a class will win out over a tag
p{
font-weight: normal;
}
.weight{
font-weight: bold;
}
.weight{
font-weight: bold;
}
This rule wins out because a class has more weight than a tag.
Cascade Rule Two
Sort by weight
The styles are checked in the following order each subsequent style sheet has a greater weight than the previous.
Default: Browser
User: Style Sheet
Author: Style Sheet - Linked
Author: Style Sheet - Embedded in the head of the web page
Author: Style Sheet - Inline within the body of the web page
The information in the Inline style sheet would have the most weight .
! importance styles have more weight than anything else:
p.red{
color: #f00 !important;}
Cascade Rule Three
Sort by Specificity
Determines how specific the rule is
#content{
color: #333
}
#content p{
color: #foo
}
#content p.red{
color: #foo
}
#content p.red{ color: #foo}
This rule wins out because it is the most specific of the three
Cascade Rule Four
Sort by Order
If two rules have the same properties, specificy and values the one that appears later in the css will be the one that the browser uses.
Smashing CSS
Transending CSS
The Zen of CSS design
share / bookmark