Introducing the CSS Cascade

The cascade is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin, cascade layer, or @scope block set a value for a property on an element.

The cascade lies at the core of CSS, as emphasized by the name: Cascading Style Sheets. When a selector matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater specificity.

This article explains what the cascade is and the order in which CSS declarations cascade, covering cascade layers and origin type. Understanding origin precedence is key to understanding the cascade.

Origin types

The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations come from different origin types: User-agent stylesheets, Author stylesheets, and User stylesheets.

Though stylesheets come from these different origins and can be within different layers in each of these origins, they overlap in terms of their default scope; to make this work, the cascade algorithm defines how they interact. Before addressing the interactions, we'll define some key terms in the next few sections.

User-agent stylesheets

User-agents, or browsers, have basic stylesheets that give default styles to any document. These stylesheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.

Some browsers let users modify the user-agent stylesheet, but this is rare and not something that can be controlled.

Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude: that means some differences exist between browsers. To simplify the development process, Web developers may use a CSS reset stylesheet, such as normalize.css, which sets common properties values to a known state for all browsers before beginning to make alterations to suit their specific needs.

Unless the user-agent stylesheet includes an !important next to a property, making it "important", styles declared by author styles, including a reset stylesheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector.

Author stylesheets

Author stylesheets are the most common type of stylesheet; these are the styles written by web developers. These styles can reset user-agent styles, as noted above, and define the styles for the design of a given web page or application. The author, or web developer, defines the styles for the document using one or more linked or imported stylesheets,

and then in the body of the document we have inline styles:

html

Hello

In the CSS code block above, three cascade layers named "A", "B", and "C", were created, in that order. Three stylesheets were imported directly into layers and two were imported without creating or being assigned to a layer. The "All unlayered styles" in the list below (normal author style precedence - order 4) includes styles from these two stylesheets and the additional unlayered CSS style blocks. In addition, there are two inline styles, a normal line-height declaration and an important text-decoration declaration:

Precedence Order (low to high)	Author style	Importance
1	A - first layer	normal
2	B - second layer	normal
3	C - last layer	normal
4	All unlayered styles	normal
5	inline `style`	normal
6	animations
7	All unlayered styles	`!important`
8	C - last layer	`!important`
9	B - second layer	`!important`
10	A - first layer	`!important`
11	inline `style`	`!important`
12	transitions

In all origin types, normal styles contained in layers have the lowest precedence. In our example, the normal styles associated with the first declared layer (A) have lower precedence than normal styles in the second declared layer (B), which have lower precedence than normal styles in the third declared layer (C). These layered styles have lower precedence than all normal unlayered styles, which includes normal styles from unlayeredStyles.css, moreUnlayeredStyles.css, and the color of p in the \n\n

and then in the body of the document we have inline styles:\n

htmlHello
\n\nIn the CSS code block above, three cascade layers named \"A\", \"B\", and \"C\", were created, in that order. Three stylesheets were imported directly into layers and two were imported without creating or being assigned to a layer.\nThe \"All unlayered styles\" in the list below (normal author style precedence - order 4) includes styles from these two stylesheets and the additional unlayered CSS style blocks. In addition, there are two inline styles, a normal line-height declaration and an important text-decoration declaration:\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nPrecedence Order (low to high)\n Author style\n Importance\n\n\n
1\n A - first layer\n normal\n\n
2\n B - second layer\n normal\n\n
3\n C - last layer\n normal\n\n
4\n All unlayered styles\n normal\n\n
5\n inline style\n normal\n\n
6\n animations\n \n\n
7\n All unlayered styles\n !important\n\n
8\n C - last layer\n !important\n\n
9\n B - second layer\n !important\n\n
10\n A - first layer\n !important\n\n
11\n inline style\n !important\n\n
12\n transitions\n \n\n\n\nIn all origin types, normal styles contained in layers have the lowest precedence. In our example, the normal styles associated with the first declared layer (A) have lower precedence than normal styles in the second declared layer (B), which have lower precedence than normal styles in the third declared layer (C). These layered styles have lower precedence than all normal unlayered styles, which includes normal styles from unlayeredStyles.css, moreUnlayeredStyles.css, and the color of p in the