CSS Cascade

The CSS cascade is the process browsers use to determine which CSS declaration is applied when more than one declaration can set the same property on an element.

The word cascading in Cascading Style Sheets refers to this process. The browser considers several factors, including origin and importance, cascade layers, specificity, and source order, before determining which declaration takes precedence.

How the Cascade Works

When several CSS declarations could set the same property on the same element, the browser does not simply use the last rule it finds. It compares the competing declarations according to the cascade.

For beginner-level CSS, the most important factors to understand are:

Origin and importance
Cascade layers
Specificity
Source order

Each factor is considered in sequence. A later factor is used only when the competing declarations have not already been separated by an earlier factor.

Origin and Importance

CSS can come from different origins. The three main origins are the browser's user-agent styles, styles supplied by the user, and author styles supplied by the webpage.

Declarations can also be normal or important. An important declaration uses !important.

p {
  color: red !important;
}

Importance changes how a declaration participates in the cascade. It is not part of selector specificity.

For most everyday website development, the CSS you write is author CSS. Browser defaults provide the starting styles, and your author styles commonly replace or modify those defaults.

Cascade Layers

Cascade layers allow author styles to be organized into explicit priority groups using the @layer rule.

@layer base, components;
@layer base {
  p {
    color: blue;
  }
}
@layer components {
  p {
    color: green;
  }
}

For normal declarations in this example, the components layer has priority over the earlier base layer, so the paragraph is green.

Unlayered normal author styles take precedence over normal author styles placed inside layers. Cascade layers are covered in greater detail in the CSS Cascade Layers tutorial.

Specificity

When competing declarations have the same origin, importance, and applicable layer priority, the browser compares their selector specificity.

p {
  color: blue;
}
.message {
  color: green;
}

If a paragraph has the message class, both rules match it. The class selector has greater specificity than the type selector, so the paragraph is green.

Specificity is covered in detail in the CSS Specificity tutorial.

Source Order

When competing declarations remain equal after the earlier cascade considerations, the declaration that appears later in the applicable source order takes precedence.

.message {
  color: blue;
}
.message {
  color: green;
}

Both selectors have the same specificity. Because the green declaration appears later, the text is green.

Source order also explains why the order of external stylesheets and internal <style> elements can matter when otherwise equal declarations compete.

Inline Styles

An inline style is written directly in an element's style attribute. Normal inline declarations generally take precedence over normal author declarations from stylesheets within the same author origin.

<p class="message" style="color: red;">This text is red.</p>

An inline style should not be thought of as simply being "last" in the stylesheet. It has a special position within the cascade and normally overrides stylesheet declarations regardless of their selector specificity.

Inline styles can be useful in specific situations, but relying on them extensively can make a website more difficult to maintain.

CSS Cascade Example

The following example demonstrates specificity and source order working within the cascade. Change or remove the rules in the editor to see how the result changes.

<style>
p {
  color: blue;
}
.message {
  color: green;
}
.message {
  color: red;
}
</style>

<p class="message">Which color will this paragraph use?</p>

Play in Editor

The class selectors have greater specificity than the type selector. The two class selectors have equal specificity, so source order decides between them. The second .message rule appears later, making the paragraph red.