Cascade Layers

The cascade is the algorithm that decides which CSS rule wins when several target the same element, weighing origin, specificity, and source order — and @layer (cascade layers) gives you explicit control over that order so later layers beat earlier ones regardless of specificity.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

The cascade is like a courtroom. Multiple "witnesses" (style rules) testify about what an element should look like. The judge (browser) decides based on a strict hierarchy: importance → layer → specificity → source order . The most authoritative witness wins.

Every CSS selector has a specificity score. Higher scores win when rules conflict.

@layer lets you organize your CSS into priority levels. Later layers override earlier ones, regardless of specificity within the layer.

Some CSS properties are inherited by child elements, others are not. Understanding this saves you from writing redundant CSS.

You now understand exactly how the browser resolves CSS conflicts:

Practice quiz

In the cascade, which factor has the highest priority?

  • Source order
  • Specificity
  • Cascade layer order
  • !important

Answer: !important. !important sits at the top of the resolution order, above inline styles, layers, and specificity.

What is the specificity score of the selector #special?

  • (0, 0, 1)
  • (0, 1, 0)
  • (1, 0, 0)
  • (1, 1, 1)

Answer: (1, 0, 0). An ID selector contributes to the ID column, giving #special a specificity of (1, 0, 0).

Which selector wins between '.highlight' and 'p'?

  • p, because elements are stronger
  • .highlight, because a class beats an element
  • Whichever comes last
  • Neither — it is an error

Answer: .highlight, because a class beats an element. A class (0,1,0) outranks an element (0,0,1), so .highlight wins regardless of order.

With @layer reset, base, components, utilities; which layer has the highest priority?

  • reset
  • base
  • components
  • utilities

Answer: utilities. Later-declared layers win, so utilities (declared last) has the highest priority.

How does cascade layer order interact with specificity?

  • Specificity always beats layer order
  • Layer order takes priority over specificity
  • They are added together
  • Layers ignore specificity entirely within a layer

Answer: Layer order takes priority over specificity. Layer order outranks specificity: a low-specificity rule in a later layer beats a high-specificity rule in an earlier one.

Which of these CSS properties is inherited by child elements by default?

  • border
  • padding
  • color
  • background

Answer: color. Text-related properties like color inherit; box properties such as border, padding, and background do not.

When two selectors have equal specificity, which rule wins?

  • The first one in the stylesheet
  • The last one in the stylesheet
  • Neither applies
  • The shorter selector

Answer: The last one in the stylesheet. With equal specificity, source order decides: the last matching rule wins.

What is the specificity of '.card .text' (two classes)?

  • (0, 1, 0)
  • (0, 2, 0)
  • (1, 0, 0)
  • (0, 0, 2)

Answer: (0, 2, 0). Two class selectors give (0, 2, 0).

Which CSS property is NOT inherited by default?

  • font-family
  • line-height
  • text-align
  • margin

Answer: margin. margin is a box property and is not inherited; font-family, line-height, and text-align all inherit.

Why is overusing !important considered bad practice?

  • It is invalid CSS
  • It breaks the natural cascade and makes debugging hard
  • It only works in Firefox
  • It slows down rendering

Answer: It breaks the natural cascade and makes debugging hard. !important short-circuits the cascade, making conflicts hard to trace and override.