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):
Origin > Specificity > Order.
There are actually 7 levels of stylesheet origin (in increasing priority):
- user agent
- CSS Animations @keyframes
- author !important
- user !important
- user agent !important
A better way to understand what they are is to remember where they come from:
user agentstylesheet is defined by the browser
userstylesheet is defined by the user (this is not often used)
authorstylesheet 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.
Every CSS declaration has a numerical specificity, as defined by the number of each selector type.
Selector types by increasing specificity:
- Tags and pseudo-elements
- Classes, attributes, and pseudo-classes
- Inline styles
Higher numbers of a more specific selector type will "win".
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.