CSS Basics w3c
intro | media-types | reset/setup
RULES: css | cascading | @rules
SELECTORS: selectors | properties/values
Cascading Rules
Sort by Importance
A varity of style sheets can be associated with a particular web page. The browser reads all of the styles, which 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.
Rules
Cascade Rule One
Sort by ImportanceFind all the declarations that apply to each selector. As each page loads the browser checks every element on the page to see if a rule matches it.
If there are any conflicts in your css, there is an order of importance in which some selectors are more important than others:
an ID will win out over a class
a class will win out over 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.
Cascade Rule Three
Sort by Specificity
Determines how specific the rule is
#content{
color: #333
}
#content p{
color: #f00
}
#content p em{
color: #f00
}
#content p em{ 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 but:
! importance has more weight than anything else regardless of its position within the style sheet;
p em{
color: #f00 !important;
}