HTML and CSS Reference
In-Depth Information
figure 6-16
styles for the form field sets
sets the b
a
ckground color of
each field
s
et to a medium yellow
adds a 1-p
ix
el-wide solid
red border
to each field set
sets the width of
each field set to
46% of the total
page
width
floats each field set on the left
sets the margins around the field sets
Next, you'll change the style of the field set legends, defining each legend to appear
as white text on a medium-red background.
To add a style rule for the field set legends:
◗
1.
Directly below the style for the field set selector, add the following style rule as
shown in Figure 6-17:
legend {
background-color: rgb(233, 69, 0);
color: white;
padding: 3px 0px;
text-indent: 5px;
width: 100%;
}
figure 6-17
styles for the field set legends
displays the legends in white text
on a red background
sets the text indent and the
padding space around the legend
sets
t
he width of each legend to
100% of the width of the field set
◗
2.
Save your changes to the file.
Finally, since the default style for labels and input controls is to display them inline,
they appear to run together on the form. Alice suggests that you instead display them as
blocks and float them side-by-side within the two field sets to make them easier to read.
