Skip to main content

Cascade Layers — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Cascade Layers lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Declare the layer order

    easy10 min

    Order base then theme, and let theme's blue win over base's red.

  2. 2

    Let a later layer win

    easy10 min

    Two layers, base then theme; theme should make #title green.

  3. 3

    Beat a layer from outside

    easy10 min

    Put red in a layer and let an unlayered orange rule win.

  4. 4

    Beat specificity with layer order

    easy10 min

    A low-specificity theme layer should still beat an id rule in base.

  5. 5

    Order three layers

    medium10 min

    reset, base, then theme — theme's teal should win.

Find the bug(5)

  1. 1

    Fix the reversed layer order

    easy8 min

    theme must be declared after base to win.

  2. 2

    Fix the missing at-sign

    easy8 min

    The rule is @layer.

  3. 3

    Fix the rule trapped in a layer

    easy8 min

    An unlayered rule is needed to beat the layer.

  4. 4

    Fix the undeclared order

    easy8 min

    Without an order declaration the layers fall back to source order, and base comes last.

  5. 5

    Fix the layer listed first

    easy8 min

    theme is listed before base, so it loses; it must come last.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace