HTML and CSS Reference
In-Depth Information
Figure 6-14.
Apart from the font, the form is unstyled
2.
To align the text fields vertically, set the
display
property of the labels to
inline-
block
and give them a fixed width. Also use a bold font by adding the following type
selector to form.css:
label {
display: inline-block;
width: 140px;
font-weight: bold;
}
3.
To increase the width of the text input fields, you need to use an attribute selector
to avoid affecting other
<input>
elements, such as the radio buttons and submit
button. Add the following style definition to form.css:
input[type="text"] {
width: 250px;
}
4.
Save form.css and reload form.html in a browser. The labels are now bold, and the
two text fields at the top of the form are vertically aligned and wider. But the same
styles have been applied to all labels. Using bold text for the radio button labels
looks wrong, and the fixed width wraps the text. As Figure
6-15
shows, the result
looks a mess.
