Skip to main content

CSS Syntax — exercises and bug fixes

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

    Use an element selector

    easy10 min

    Colour every paragraph green.

  2. 2

    Use a class selector

    easy10 min

    Make the .lead paragraph 18px.

  3. 3

    Use an id selector

    easy10 min

    Make #title purple.

  4. 4

    Group two selectors

    easy10 min

    Colour the heading and the paragraph teal in one rule.

  5. 5

    Use a descendant selector

    medium10 min

    Colour paragraphs inside #wrap maroon.

Find the bug(5)

  1. 1

    Fix the missing colon

    easy8 min

    A property and its value are separated by a colon.

  2. 2

    Fix the missing dot

    easy8 min

    A class selector starts with a dot.

  3. 3

    Fix the missing hash

    easy8 min

    An id selector starts with a hash.

  4. 4

    Fix the missing comma

    easy8 min

    Without a comma this becomes a descendant selector.

  5. 5

    Fix the missing semicolon

    easy8 min

    Without a semicolon the two declarations merge into one invalid one.

Ready to write the code?

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

Open the workspace