meet it

Put rules in cascade layers, and the later layer wins.

Big stylesheets turn into specificity wars: someone adds an id to win, the next person adds two. A ends that. @layer base { … } puts rules into a named group, and the browser compares groups before it ever counts specificity.

When rules in two layers disagree, the one in the later layer wins, even if the earlier rule has an id and the later one is a single tag. Inside one layer, the usual rules apply: weight first, then order.

<p id="intro" class="lead">Welcome back, Sam.</p>

@layer base {
  #intro {
    color: crimson;
  }
}
@layer theme {
  p {
    color: #264653;
  }
}

Press show my page to see it here.

The plain p beats the id, because the theme layer comes after base.

guess first

An id in the first layer, a class in the second. Who wins?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<button id="buy" class="btn">Buy now</button>

@layer components {
  #buy {
    background-color: crimson;
  }
}
@layer overrides {
  .btn {
    background-color: gold;
  }
}

your turn

Your turn. Let the theme layer win.

Fill in the layer names: put the id rule in base and the .price rule in theme, so the price turns green even though an id says red.

the page you’re styling

<p id="deal" class="price">£12.99</p>

your css

Your code

Press show my page to see it here.

the price is greennot checked yet
the id rule sits in basenot checked yet
the price rule sits in themenot checked yet

fix it

The theme layer does nothing. Can you fix it?

the page you’re styling

<h1 class="title">Order history</h1>

your css

Broken code to fix

Press show my page to see it here.

the title is tealnot checked yet

The base layer works, so layers are fine. Compare how the two blocks start.
One of them has an extra letter, so the browser skips the whole block.
Change @layers to @layer, then press run.

nailed it

you ended a specificity war. :D

@layer name { } puts rules into a cascade layer.
A later layer beats an earlier one, whatever the weight.
Inside a layer, weight and order work as usual.

new words in your collection

cascade layer

This lesson isn’t saved. A free account remembers every lesson you finish.