Skip to main content

CSS Text Color — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Text Color 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 a paragraph

    easy10 min

    Set the #text colour to #333333.

  2. 2

    Colour a heading

    easy10 min

    Make the #title navy.

  3. 3

    Let colour inherit

    easy10 min

    Set the colour once on #wrap so #text inherits it.

  4. 4

    Soften the text

    easy10 min

    Make #text black at 60% opacity using rgba.

  5. 5

    Style heading and body

    medium10 min

    Navy heading, #555555 paragraph.

Find the bug(5)

  1. 1

    Fix the background used for text

    easy8 min

    The text colour is set with color.

  2. 2

    Fix the misspelled colour name

    easy8 min

    That is not a recognised colour keyword.

  3. 3

    Fix the colour that will not inherit

    easy8 min

    Setting it on the paragraph alone skips the rest of the wrapper.

  4. 4

    Fix the missing alpha

    easy8 min

    A three-argument rgba is fully opaque.

  5. 5

    Fix the swapped rules

    easy8 min

    The heading should be navy and the paragraph grey.

Ready to write the code?

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

Open the workspace