Skip to main content

Cascade & Inheritance — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Cascade & Inheritance 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

    Inherit a colour

    easy10 min

    Set the colour on #parent so #box inherits red.

  2. 2

    Let the later rule win

    easy10 min

    Two rules of equal weight — make the box blue by ordering.

  3. 3

    Force inheritance

    easy10 min

    Borders do not inherit — use the inherit keyword on #box.

  4. 4

    Inherit font size

    easy10 min

    Set 24px on the parent and let the box inherit it.

  5. 5

    Override an inherited value

    medium10 min

    Parent is red, but the box itself must be green.

Find the bug(5)

  1. 1

    Fix the earlier rule expected to win

    easy8 min

    The later rule overrides it — reorder so blue wins.

  2. 2

    Fix the non-inheriting property

    easy8 min

    Border does not inherit automatically.

  3. 3

    Fix the colour set on the wrong element

    easy8 min

    The colour is on the box but should come from the parent.

  4. 4

    Fix the overridden override

    easy8 min

    The box's own colour is being lost to a later parent-scoped rule.

  5. 5

    Fix the inherited font size

    easy8 min

    The size is set on the box rather than inherited from the parent.

Ready to write the code?

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

Open the workspace