Skip to main content

CSS Class Selector — exercises and bug fixes

6 hands-on exercises and 5 find-the-bug challenges for the CSS Class Selector 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(6)

  1. 1

    Style reusable feature cards

    easy15 min

    Use the .feature class to give all three cards a teal background, white text, and a 12px border radius.

    • Keep all three feature cards
    • Give feature cards a teal background
    • Give feature cards white text
    • Give feature cards a 12px border radius
  2. 2

    Target a class

    easy10 min

    Make .card elements have a 3px solid border.

  3. 3

    Target a nested class

    easy10 min

    Make .text red.

  4. 4

    Combine element and class

    easy10 min

    Target only paragraphs with the text class.

  5. 5

    Reuse one class

    easy10 min

    Give every .card 16px of padding.

  6. 6

    Chain two classes

    medium10 min

    Target an element that has both card and card again.

Find the bug(5)

  1. 1

    Fix the missing dot

    easy8 min

    A class selector needs a leading dot.

  2. 2

    Fix the hash used for a class

    easy8 min

    A # targets an id, not a class.

  3. 3

    Fix the space between element and class

    easy8 min

    A space means a descendant; here they are the same element.

  4. 4

    Fix the misspelled class name

    easy8 min

    The class in the CSS does not match the markup.

  5. 5

    Fix the class written as an element

    easy8 min

    Without the dot this looks for a <text> element.

Ready to write the code?

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

Open the workspace