List of Topics

SfC Home > Web Design >

 

Order of Precedence for CSS Rules

by Ron Kurtus (revised 13 May 2017)

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:

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 have lowest precedence

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. It is a good idea to examine a page with no styles in each browser in order to see any difference.

External style sheets have next precedence

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.

Embedded styles

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.

Inline styles have top precedence

Finally, since inline styles are closest to the content, they take top precedence.

Specific rules

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.

Summary

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

Ron Kurtus' Credentials

Websites

What does "Cascade" mean in Cascading Style Sheets? - About.com

Web Design Resources

Books

Top-rated books on Website Design


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.


Share this page

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:
www.school-for-champions.com/web/
css_cascade_order.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Order of Precedence for CSS Rules




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.