HTML and CSS Reference
In-Depth Information
19. Directly after the vegetables field set, create a check box for the doubleCheese
field with the label text add Double cheese . Create another check box for the
doubleSauce field with the label text add Double sauce .
20. Directly after the buildPizza field set, create a submit button with the button
text  next .
21. Save your changes to the file, and then go to the pizza.css file in your text editor and
create the styles described in the following steps.
22. Display all field sets with a background color value of (255, 246, 205) and with a
solid 1-pixel border with the color value (233, 69, 0). Float the field sets on the left
with a 1% margin. Set the width of the custInfo field set to 35%, the width of the
buildPizza field set to 60%, and the widths of the meat and vegetables field sets
to 47% each. Set the background color of the meat and vegetables field sets to the
(237, 178, 74) color value.
23. Set the font size of the field set legends to 0.9 em.
24. Display all labels as blocks with a font size of 0.8 em. Float the labels on the left
only when the left margin is clear. Set the label width to 40% of the containing ele-
ment. Set the top and bottom margins to 5 pixels and set the size of the left padding
space to 5 pixels.
25. Display all input elements and textarea elements as blocks floated on the left.
Set the width to 50% with top and bottom margins of 5 pixels. Set the height of the
textarea elements to 100 pixels.
26. Display all inline images nested within a form as blocks floated on the left with top
and bottom margins of 5 pixels.
27. Set the width of the delTime input box to 150 pixels.
28. Set the left margin of the sizeimage inline image to 40%. Set the width of the size
field range slider to 200 pixels. Make the background of the size field range slider
transparent.
29. Float the selection list for the crust field on the left with a font size of 0.8 em. Set
the top and bottom margins to 5 pixels and the width to 150 pixels.
30. Set the width of the spinner control for the quantity field to 40 pixels.
31. Set the width of fieldset elements that belong to the optionGroup class to 50%.
Remove the border from the field set and make the background transparent.
32. Set the width of radio buttons to 30 pixels and the width of check boxes to 20 pixels.
33. Set the width of the submit button to 150 pixels, set the float property to none , and
set the top and bottom margins to 0 pixels and the left and right margins to auto .
34. If an input element, select element, or textarea element receives the focus, set
the background color to the value (220, 255, 220).
35. If an input element receives the focus and is valid, set the background color to the
value (220, 255, 220) displaying the background image okay.png at the bottom-right
corner with no tiling. Size the background image so that it's contained within the
input box.
36. Repeat Step 35 for input elements that receive the focus and are invalid, setting the
background color to the value (255, 232, 233) and the background image to the file
warning.png .
37. Save your changes to the file and then load the order.htm file in your Web browser,
preferably a browser that has good support for HTML5 forms such as Opera or
Google Chrome. Test the form by confirming that it shows warnings for all invalid
data values and for required fields that have no values.
38. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
Search WWH ::




Custom Search