Skip to main content

CSS Form Styling — exercises and bug fixes

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

    Style the input

    easy10 min

    Give #input 8px padding and a 1px solid #cccccc border.

  2. 2

    Style the button

    easy10 min

    Give #btn a navy background and white text.

  3. 3

    Stack the label

    easy10 min

    Put #label on its own line.

  4. 4

    Limit the textarea resize

    easy10 min

    Let #area resize vertically only.

  5. 5

    Lay out the form

    medium10 min

    Stack the fields in a column with a 12px gap.

Find the bug(5)

  1. 1

    Fix the border with no style

    easy8 min

    A border needs a style to be drawn.

  2. 2

    Fix the swapped colours

    easy8 min

    The button should be navy with white text.

  3. 3

    Fix the inline label

    easy8 min

    A label on its own line needs display: block.

  4. 4

    Fix the resize value

    easy8 min

    Vertical-only resizing uses the value vertical.

  5. 5

    Fix the row layout

    easy8 min

    The fields should stack in a column.

Ready to write the code?

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

Open the workspace