Hack Frontend Community

What is Cascade in CSS

Cascade (Cascading) is the main mechanism that determines which style will be applied when multiple CSS rules target the same element.

CSS stands for Cascading Style Sheets — cascading style sheets. The word "cascading" indicates that styles overlay each other and are applied according to certain priority rules.

What Influences Style Selection?

When multiple CSS rules are applied to one element, the browser chooses the one with highest priority. This considers:

1

Specificity

How "precisely" the CSS rule targets the element. Higher specificity means higher priority.

div a        /* low specificity */
.menu a      /* higher */
#header a    /* even higher */
2

Importance (!important)

If !important is added to a property, it overrides even more specific rules.

p { color: red !important; }
3

Style Source

Source of the style:

  • User styles (in browser)
  • Inline styles (style="...")
  • External stylesheets (<link> / @import)
  • Default styles (user-agent styles)
4

Source Order

If specificity is equal, the style that comes last in code wins.

Recommendation:

Avoid excessive use of !important — it complicates code support and debugging.