css · level 3 · unit 2 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
One line at the top decides the .
Layers rank by when the browser first meets their name, which gets fragile when files are combined. So professionals write the layer order once, at the very top: @layer reset, base, components, utilities;. Later blocks fill those layers in, wherever they appear.
Rules outside every layer are , and unlayered rules beat all layers. That is handy for a quick fix, but it also means old code with no layers can quietly beat your whole new system.
<a class="btn" href="https://example.com/join">Join</a>@layer base, components;
@layer components {
.btn {
color: white;
background-color: #0f766e;
}
}
@layer base {
a {
color: #264653;
}
}Press show my page to see it here.
The base block sits last in the file, but the first line already ranked it below components.
guess first
A rule with no layer at all. What colour is the heading?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h2 id="title">Your basket</h2>@layer base, theme;
@layer theme {
#title {
color: crimson;
}
}
h2 {
color: #264653;
}your turn
Your turn. Put the layers in order.
Fill in the order line so utilities beats components. The .flush utility should then remove the card's margin.
the page you’re styling
<div class="card flush">Saved for later</div>your css
Press show my page to see it here.
- the utility removes the marginnot checked yet
- the card keeps its paddingnot checked yet
- the order line ranks both layersnot checked yet
fix it
The reset beats the button. Can you fix it?
the page you’re styling
<button class="btn">Pay now</button>your css
Press show my page to see it here.
- the button has its paddingnot checked yet
- the button has its bordernot checked yet
- Both layers exist and both rules match. So which layer is ranked stronger?
- The order line puts
resetlast, so the reset is the strongest layer. - Swap the names,
@layer reset, components;, then press run.
nailed it
you ranked the whole cascade. :D
- Write
@layer a, b, c;once, at the very top. - The order line beats where the blocks sit in the file.
- Unlayered rules beat every layer.
new words in your collection
- layer order
- unlayered
This lesson isn’t saved. A free account remembers every lesson you finish.