[CSS] The Cascading Rules

The W3C documents uses the hard terms that might confuse readers. The cascading order (priority) is the most important feature all developers must remember.


1. Origins

Styles can come from

  • Author : styles provided by Web page designers and developers
  • User : the viewer of the page. (Web surfers can apply their own styles)
  • User Agent : the application’s default style sheet (usually a browser)

In general, the most basic styles are from the “User Agent” (lowest priority). And then Users can provide some custom styles (preferences or accessibilities). Finally Authors provides the styles to pages.

So the Cascading order is like this (from the highest to lowest)

  1. Author Styles 
  2. User Styles 
  3. User Agent Styles

It’s not done yet.

Users and authors can provide “!important” styles.

These important styles override all normal styles. Also User’s important style will even override the Author’s important styles.

  1. User Important Styles
  2. Author Important Styles
  3. Author Normal Styles
  4. User Noraml Styles
  5. User Agent Styles


2. Cascading Order

As an author (developer) of a web page, you can think of the order a little bit differently. (from the highest priority to lowest)

  1. In-line Styles
  2. Internal Styles (in the head section)
  3. External style Sheet
  4. Browser Default Styles

!important” rules will override any settings.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s