Cascade is the "C" in "CSS", and follows three rules which are important to keep in mind when debugging your CSS (in descending order of importance):

  1. Origin
  2. Specificity
  3. Order

Remember: Origin > Specificity > Order.

Origin

There are actually 7 levels of stylesheet origin (in increasing priority):

  1. user agent
  2. user
  3. author
  4. CSS Animations @keyframes
  5. author !important
  6. user !important
  7. user agent !important

A better way to understand what they are is to remember where they come from:

  • The user agent stylesheet is defined by the browser
  • The user stylesheet is defined by the user (this is not often used)
  • The author stylesheet is defined by the website author

We will discuss CSS Animations separately, as well as the rule of thumb that you should try not to use !important in your CSS.

As a website author most of your work will be on the author stylesheet, where you will be dealing with specificity.

Specificity

Every CSS declaration has a numerical specificity, as defined by the number of each selector type.

Selector types by increasing specificity:

  1. Tags and pseudo-elements
  2. Classes, attributes, and pseudo-classes
  3. IDs
  4. Inline styles

Higher numbers of a more specific selector type will "win".

Order

If two conflicting declarations have the same specificity, then whatever is last wins. In particular this can be handy with link styles: Where you have multiple styles that could match (as link pseudoclasses often do), the later style overrides the earlier one.


1,435 1 33