Styling Forms Using CSS

There are many ways to customize HTML forms. You can style the labels and legends by specifying a sans-serif font-family and larger font-size for the form.

For example,

form {
 width: 50%;
 margin: 0 auto 0 auto;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 1em;
}

This styling controls the width of the form and also centers it. Font styling for the form affects only the labels and legends. For a larger font-size for the user inputs as well, you have to create separate styling for them.

input[type="text"], input[type="email"], textarea {
 margin-bottom: .25em;
 padding: .25em;
 font-size: 1em;
}