A Smarter Way To Learn HTML & CSS(2015)

58
Forms: styling

Here’s a filled-out form without any CSS styling.

Now I’ll give it some styling. It isn’t museum-quality, but I like it better.

There are more ways to customize HTML forms than there are stars in the galaxy. Let me show you the minimal styling I used for the form shown above.

To begin with, I styled 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;
}

The styling shown above controls the width of the form and also centers it. Font-styling for the form affects only the labels and legends. I wanted a larger font-size for the user inputs as well, so I had to create separate styling for them.

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

As you can see, the syntax varies, depending on the type of inputs you’re styling.

· For single-line text and email inputs, the selectors are input[type="text"] and input[type="email"].

· For a textarea, it’s just textarea.

I wanted a hefty Submit button, so I coded this styling.

input[type="submit"] {
font-size: 1.25em;
}

The button will expand to accommodate the enlarged text.

I bolded the legends.

legend {
font-weight: 700;
}

In your CSS file double the font-size of text input and textarea controls, and give them some padding all around. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-58-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/58.html