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.
Search WWH ::




Custom Search