Order of Precedence for CSS Rules
by Ron Kurtus (revised 24 November 2014)
An interesting aspect of Cascading Style Sheets (CSS) is that the order in which the rules are stated determines which ones take precedence in cases of conflict or repetition. In other words, the CSS rules can "cascade" in their order of precedence.
Where the rules are located is one factor in the order of precedence. The location order of precedence is: browser default rules, external style sheet rules, embedded styles, and inline style rules.
Specific rules take precedent over more general rules. Also, the rules toward the end of a style sheet take precedence over the front rules.
Questions you may have include:
- What is the cascade from the location of the rules?
- Which rules are more specific?
- How is does order of rules affect precedence?
This lesson will answer those questions.
Location of rules
Cascading style sheet rules can be located in several places, which include browser default style sheet, external style sheet, embedded styles, and inline style rules.
The closer a rule is to the content being styled, the higher its precedence. The cascade of rules starts with the furthest and goes toward the closest to the content.
Browser style sheet
All browsers have a built-in default style sheet. The cascade starts with these styles. If you have no styles defined, the browser styles will be used. Note that defaults are slightly different in each browser.
Note: It is a good idea to examine a page with no styles in each browser in order to see any difference.
External style sheets
Browser default styles are overridden by the rules in external style sheets. If there are several external style sheets, they apply in the order listed.
Styles embedded in the page header are the next in order of precedence. If there are many rules, typically they are placed in an external style sheet.
Finally, since inline styles are closest to the content, they take top precedence.
The more specific a rule is, the greater its precedence.
Any rule on a tag is the least specific. A class rule is more specific and overrides the tag rule. Since an ID rule can be used only once in a web page, it is the most specific, overriding the other two.
For example, if the style sheet defines <h1> as being centered, then <h2 class="left"> takes precedence and <h2 id="right"> takes precedence to both rules.
Later rules take precedence
Finally, sort the rules by the order they were defined. Rules that are defined later in the document tree have higher precedence than those defined earlier.
And rules from an imported style sheet are considered before rules directly in the style sheet.
The location of the styles and rules is one factor in the order of precedence. Specific rules take precedent over more general rules. Also, the rules toward the end of a style sheet take precedence over the front rules.
Know the rules and obey them
Resources and references
Questions and comments
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.
Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:
Students and researchers
The Web address of this page is:
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
Order of Precedence for CSS Rules