Creating a Web Form - HTML, CSS, and Dynamic HTML - page 413

To define a style for the labels and input controls:

◗

1. At the bottom of the style sheet, add the following style rule for the form labels
(see Figure 6-18):

/* Label styles */

label {
clear: left;
display: block;
float: left;
font-size: 0.9em;
margin: 7px 4% 7px 5px;
width: 40%;
}

figure 6-18 styles for the field labels

displays the label only when
the left m argin is clear

displays each l a bel as a block
floated on the l left;

sets the font size of each field label

sets the margin around each label

se t s the label width to 40%
of the width of the field set

◗

2. Below the style rule you just created, add the following style rule for input con-
trols (see Figure 6-19):

/* Input control styles */

input {
display: block;
float: left;
font-size: 0.9em;
margin: 7px 0px;
width: 50%;
}