Skip to main content

How to Add CSS — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the How to Add CSS 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

    Add a stylesheet rule

    easy10 min

    In this stylesheet, make #text navy.

  2. 2

    Let the later rule win

    easy10 min

    Write two rules for p; the second should make it red.

  3. 3

    Beat a class with an id

    easy10 min

    A .lead rule says green; make an id rule win with orange.

  4. 4

    Force a value with !important

    easy10 min

    The id rule says orange; make the class rule win anyway with green.

  5. 5

    Combine the cascade rules

    medium10 min

    Element blue, class green, id red — the id should win.

Find the bug(5)

  1. 1

    Fix the missing closing brace

    easy8 min

    The unclosed rule swallows the one after it as a nested rule.

  2. 2

    Fix the order

    easy8 min

    The red rule must come second to win.

  3. 3

    Fix the selector that is not specific enough

    easy8 min

    A class cannot beat an id by order alone.

  4. 4

    Fix the misplaced !important

    easy8 min

    !important goes before the semicolon, after the value.

  5. 5

    Fix the rule that loses

    easy8 min

    The id rule should decide the final colour.

Ready to write the code?

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

Open the workspace