HTML and CSS Reference
In-Depth Information
7. You can use the
<legend>
element of the
<fieldset>
as the label for the radio
group by setting its font to bold. You also need to remove the left padding from the
<legend>
to align it correctly with the other labels. Add the following style rule:
legend {
font-weight: bold;
padding-left: 0;
}
8.
Save form.css, and reload form.html in the browser. As Figure
6-16
shows, the
radio button group now looks much better. The
<label>
elements now stretch their
natural width, and the
<legend>
identifies the whole group.
Figure 6-16.
The restyled fieldset
9. Using a bold font is fine for the labels for the
<select>
menu and
<textarea>
, but
the wrapped text looks odd. Although you could increase the width of all labels, it
would create too large a gap for the text input fields at the top of the form. instead,
create attribute selectors for the last two labels using their
for
attribute to identify
them. Set their
display
property to
block
and their
width
property to
auto
like this:
label[for="region"], label[for="ideas"] {
display: block;
width: auto;
}
10. To finish styling the form, add a couple of style rules to set the width and height of
the
<textarea>
, and to indent the form like this:
textarea {
height: 100px;
width: 300px;
}
form {
margin-left: 60px;
}
11.
Save form.css, and reload form.html in a browser. it should look like Figure
6-17
.
