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.

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;
}

 

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive