Skip to main content

What does "cascade" mean in the behavior of CSS rules?

CSSJunior~1 min read
Suggest an edit

The cascade in CSS is the mechanism by which the browser decides which of several conflicting rules to apply to an element. If different styles match the same element, CSS "cascades" them by priority and picks the final value, like water flowing down a cascade.

The cascade takes three main criteria into account:

1. Rule source

Higher-priority sources override lower-priority ones. The conditional hierarchy:

  1. inline styles (style="")
  2. styles in <style> or a linked CSS file
  3. default browser styles

2. Specificity (selector precision)

If two rules from the same source conflict, the one with higher "precision" wins. By significance:

  1. id, the most precise
  2. classes, pseudo-classes
  3. tags, pseudo-elements

For example:

css
p { color: blue; } /* low specificity */ .text { color: green; } /* higher */ #main { color: red; } /* highest */

The result will be red.

3. Order in the code

If the specificity is the same, the rule that is written later wins.

css
p { color: blue; } p { color: black; } /* this one applies */

Summary: the cascade is a system of priorities that decides which CSS rule to apply when there is more than one. It takes into account source → specificity → rule order.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit