Michael Gearon

How does CSS cascade?

Michael Gearon

Last updated on

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:

  1. Origin and importance
  2. Specificity
  3. Order in the file
  4. 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.

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.

Further Reading

 

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.