HTML and CSS Reference
In-Depth Information
figure 6-19
styles for input controls
displays each in
p
ut control as a
block, floated o
n
the left
sets the font size of the text in the input control
sets the margin space around the input control
sets th
e
width of each input control
to 50% of the width of the field set
◗
3.
Save your changes to the
forms.css
file and then return to the
survey.htm
file in
your text editor.
◗
4.
Below the
link
element that links the file to the
rb.css
style sheet, add the follow-
ing element to link to the
forms.css
style sheet:
<link href=”forms.css” rel=”stylesheet” />
Now you'll view the effect of your fieldset, legend, label, and input styles on the
appearance of the survey form.
◗
5.
Save your changes to the file and then refresh
survey.htm
in your Web browser.
Figure 6-20 shows the revised appearance of the Web form.
figure 6-20
revised format of the survey form
legend
field label
input box
field se
t
Trouble?
If your form does not match that shown in Figure 6-20, check your style
sheet code against that shown in Figures 6-16 through 6-19. Make sure you have
not mistyped a style property or forgotten to separate one style from another with
a semicolon.
Not all of the input boxes need to have a width of 50%. The input box for the
state
field only needs to be large enough to display the two-letter abbreviation of the state
name. You'll reduce the width of this input box now.