Skip to main content

CSS Units — exercises and bug fixes

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

    easy10 min

    Give #box a 150px width.

  2. 2

    Use rem

    easy10 min

    Give #box a 2rem font size (32px).

  3. 3

    Use em relative to the element

    easy10 min

    Set the box font to 20px and its padding to 1em (20px).

  4. 4

    Use a unitless line height

    easy10 min

    Give #box a line-height of 1.5 with no unit.

  5. 5

    Mix units deliberately

    medium10 min

    Set a 1rem margin and a 24px padding on the box.

Find the bug(5)

  1. 1

    Fix the missing unit

    easy8 min

    A bare number is invalid for width.

  2. 2

    Fix rem mistaken for pixels

    easy8 min

    2rem is 32px, not 2px — the intent was 32px.

  3. 3

    Fix em compounding

    easy8 min

    The padding should equal the element's own 20px font size.

  4. 4

    Fix the unit on line-height

    easy8 min

    A unitless line-height scales with the font; 1.5 was intended.

  5. 5

    Fix the invalid unit

    easy8 min

    "pixels" is not a CSS unit.

Ready to write the code?

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

Open the workspace