Important declarations reverse the layer order; revert-layer
Cascade layers (@layer) group rules into named layers whose order you declare up front; a later layer beats an earlier one before specificity is even compared, so resets, frameworks and your own code stop fighting.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write CSS with three layers, reset, base and components. The reset removes all margins, base gives p a bottom margin of 1em, and a .card p component rule sets its margin to 0.5em. Which margin does a paragraph inside .card get?
A framework's .btn { background: blue; } is unlayered and loaded before your stylesheet. You add @layer app { .btn { background: green; } }. What colour is the button, and how do you fix it?
Explain it without notes
What is a cascade layer, and at which step of the cascade are layers compared?
How is the order of layers decided? What happens if the layer statement comes after some layer blocks?
How do unlayered styles rank against layered styles, for normal and for important declarations?
How would you use layers to make sure your code always beats a third-party CSS framework?
Preview
Console
Nothing logged yet.Expected console output
Paragraph 1: crimson
Paragraph 2: tomato
Paragraph 3: navy