Skip to main content

CSS Colors — exercises and bug fixes

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

Exercises(5)

  1. 1

    Colour the text

    easy10 min

    Make the #box text red.

  2. 2

    Colour the background

    easy10 min

    Give #box a teal background.

  3. 3

    Colour a border

    easy10 min

    Give #box a 2px solid goldenrod border.

  4. 4

    Make text invisible

    easy10 min

    Set the #box text colour to transparent.

  5. 5

    Pair text and background

    medium10 min

    White text on a navy background.

Find the bug(5)

  1. 1

    Fix the misspelled colour name

    easy8 min

    That is not a recognised colour keyword.

  2. 2

    Fix the wrong property

    easy8 min

    The background should be teal, not the text.

  3. 3

    Fix the border with no style

    easy8 min

    A border with no style is not drawn.

  4. 4

    Fix the British spelling

    easy8 min

    The CSS property is spelled color.

  5. 5

    Fix the wrong colour

    easy8 min

    The background should be navy, not maroon.

Ready to write the code?

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

Open the workspace