Test your skills: Styling basics

The aim of this skill test is to assess whether you've understood our Styling web forms article.

Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Styling basics 1

Our basic form styling assessment is fairly free-form, and you have a lot of flexibility over what you end up doing here. But your CSS should aim to fulfill the following requirements:

  1. Add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with.
  2. On top of that, add in some nice, consistent styling for the inputs and button.
  3. Use some kind of layout technique to make the inputs and labels line up neatly.

Download the starting point for this task to work in your own editor or in an online editor.