How does CSS cascade?

Michael Gearon

Last updated on July 1, 2021

Cascading is probably one of the most important factors in CSS. The cascade in cascading style sheets (CSS) is the process, or algorithm, that determines the properties applied to each element on the page. CSS works by taking in four factors, listed in order from highest weight to least weight:

Origin and importance
Specificity
Order in the file
Inheritance

The benefit is that CSS can then resolve it’s own conflict working through those 4 factors. Here’s the definition from the CSS Cascade Level 4 Spec.

The cascade takes a unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.

What is covered in the cascade?

For the most part a lot of CSS written follows the cascading process however there are a few properties or values that don’t participate. The ones that don’t follow it are the at-rules containing entities other than declarations.

There are two in particular that are examples of this, the @font-face rule as that contains descriptors as well as @keyframes. Other at-rules like @media, @supports or @document do follow the cascade as they contain more than descriptors within them.

The origin of CSS declarations

There are 3 different origins of CSS which are user-agent stylesheets, the author stylesheets and the user stylesheets.

User-agent stylesheets

The user-agent is the default styling for the HTML elements provided by the browser. The user-agent stylesheets are the reason why some elements, in particular form elements, look slightly different across browsers. Often people use CSS resets to remove any default styling to ensure that their web application is consistent across browsers.

Author stylesheets

The author stylesheet is the CSS that is written by the website creator and is declared by the HTML document. These style sheets set the styles for the web page and the author of the page defines the styles.

User stylesheets

The user can also write their own styles which override the styles of the user-agent stylesheet or the author stylesheets. Some users write their own stylesheets to improve accessibility for their own needs. Examples of where they may use a custom stylesheet is to increase the font size, improve color contrast or increase the spacing.

Order and Position

CSS also works by the order of where the CSS is placed. It always prioritizes from left-to-right, then from top-to-bottom. With this in mind when two selectors have the same specificity, the declaration that comes last and furtherest to the left is the winner.

This also applies if you have more than one stylesheet linked in the head of your HTML document. The second stylesheet (or the last stylesheet in the head) has the final say over which styles are applied. If you’re using CSS reset or any other CSS frameworks the recommendation is these all come before your author stylesheets.

External and embedded stylesheets

There are two types of stylesheets, you can either embed CSS within the HTML or you can link to an external stylesheet. With the priority and the cascade of the CSS in this case embedded styles and external stylesheets have the same priority. Therefore it falls back on the ordering of the styles, for example if the embedded styles come after the external stylesheet then the embedded styles would take priority.

Inline styles

The second most important factor in the cascade is inline styles. The only thing that can override inline styles is the !important keyword. As with the order and position section the inline styles work by normal ordering rules which are left-to-right and top-to-bottom.

Inheritance

As part of the cascade some HTML elements pick up (on inherit) styles from higher up in the document tree. An example of this is you tend to see the font being declared on the body element, this then cascades to all elements that are within the body (that are not being overidden).

Written by