CSS Cascade

CSS Cascade

More than one CSS rule can apply to the same HTML element. The CSS cascade is the system browsers use to determine which declarations take precedence when those rules set the same property to different values.

Why the Cascade is Needed

CSS stands for Cascading Style Sheets. The word cascading refers to the way the browser resolves competing CSS declarations and determines which styles should be used.

A web page may receive styles from several rules. Some rules may target every element of a particular type, while others target elements with specific classes or IDs. When these rules set different properties, they can all contribute to the final appearance of the element.

p {
  color: blue;
  font-size: 18px;
}

.notice {
  background-color: #f5f5f5;
}

A paragraph with class="notice" can receive the text styles from the first rule and the background color from the second rule. There is no conflict because the rules set different properties.

When CSS Rules Conflict

A conflict occurs when multiple applicable declarations attempt to set the same CSS property to different values.

p {
  color: blue;
}

p {
  color: red;
}

Both rules select the same paragraphs and both set the color property. The browser therefore needs to determine which declaration takes precedence.

Source Order

When competing declarations otherwise have the same priority, the declaration that appears later takes precedence.

p {
  color: blue;
}

p {
  color: red;
}

Both selectors are identical, so the second declaration wins and the paragraph is red.

Changing their order changes the result:

p {
  color: red;
}

p {
  color: blue;
}

This is sometimes described as the later rule winning, but that is only true after the other parts of the cascade have been considered. A more specific or otherwise higher-priority declaration can take precedence even when it appears earlier.

Selector Specificity

The type of selector used can also affect which declaration takes precedence. CSS uses a concept called specificity to compare selectors when competing declarations have the same origin and importance.

#intro {
  color: red;
}

p {
  color: blue;
}

<p id="intro">This paragraph is red.</p>

The ID selector #intro is more specific than the element selector p, so its red text color takes precedence even though the p rule appears later.

The next tutorial looks more closely at CSS specificity and how different selectors are compared.

The !important Declaration

CSS allows !important to be added to a declaration to give it greater priority over normal declarations within the cascade.

p {
  color: blue !important;
}

p {
  color: red;
}

In this example, the paragraph remains blue because the first declaration is marked !important.

!important can be useful in particular situations, but it should not be used simply to avoid understanding why another CSS rule is taking precedence. Overusing it can make stylesheets harder to understand and maintain.

Understanding the Cascade

The complete CSS cascade includes several factors, but beginners do not need to memorize every detail before working with CSS. For the examples in these HTML Tutorials, the most important idea is that the browser does more than simply choose the last CSS rule it finds.

When declarations compete for the same property, the browser considers factors that include where the styles come from, whether a declaration has special importance, selector specificity, and source order. Only after the applicable declarations have been compared does the browser determine the value to use.

For now, remember these practical points: rules that set different properties can work together, specificity can cause one selector to take precedence over another, and source order can decide between declarations that otherwise have equal priority.

Summary

The CSS cascade determines which declarations are applied when multiple CSS rules affect the same HTML element. Rules that set different properties can work together, while conflicting declarations must be compared to determine which one takes precedence.

Source order, selector specificity, importance, and other parts of the cascade can affect the final result. The next tutorial focuses specifically on how CSS compares the specificity of selectors.