Skip to main content

CSS Variables — exercises and bug fixes

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

    Define a variable

    easy10 min

    Define --brand on :root and use it for the box colour.

  2. 2

    Use a variable for spacing

    easy10 min

    Define --gap as 24px and use it as padding.

  3. 3

    Provide a fallback

    easy10 min

    Use a fallback so the box is blue when the variable is undefined.

  4. 4

    Scope a variable

    easy10 min

    Define --brand on #parent so only its children use it.

  5. 5

    Override a variable deeper down

    medium10 min

    Root sets red; #parent overrides it to blue.

Find the bug(5)

  1. 1

    Fix the missing dashes

    easy8 min

    Custom properties must start with two dashes.

  2. 2

    Fix the variable used without var()

    easy8 min

    A custom property must be read through var().

  3. 3

    Fix the out-of-scope variable

    easy8 min

    The variable is defined on a sibling, so the box cannot see it.

  4. 4

    Fix the missing fallback

    easy8 min

    The variable is undefined, so the colour never applies.

  5. 5

    Fix the typo in the variable name

    easy8 min

    The name used does not match the one defined.

Ready to write the code?

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

Open the workspace