HTML and CSS Reference
Complete the following:
1. In your text editor, open the cssdemotxt.htm file from the tutorial.06\case3 folder
included with your Data Files. Enter your name and the date in the comment section
of the file. Save the file as cssdemo.htm .
2. Review the contents and structure of the document. Link the file to the cssforms.css
3. Directly below the paragraph within the section element, insert a form element.
You do not have to specify an action or a method.
4. Create field sets with ids equal to textstring , fonts , colors , and sizes . Do not
add a legend to the textstring field set. For the three remaining field sets, add the
legend text fonts , colors , and sizes , respectively.
Note: In the steps that follow, make sure you add both an id attribute and a name
attribute to each input box, selection list, or text area box, giving the same value to
both attributes. Also, make sure that you enter the name-id values in lowercase let-
ters. Finally, make sure that every selection list has both option text and option val-
ues set to the same text string.
5. Within the textstring field set, insert a label containing the text enter your sample
text below , followed by a text area box. The text area box should have the name and
id value sampletext . Set the text area so that it automatically receives the focus
when the page is loaded, and set its tab index value to 1. Set the line wrap within
the text area box to hard to preserve any line breaks within the text area box.
6. Within the fonts field set, insert a label containing the text font family followed by
a selection list for the fontfamily field. Add the following options to the selection
list: default , serif , sans-serif , monospace , cursive , fantasy , arial , 'book antiqua' ,
'courier new' , Geneva , Helvetica , impact , Palatino , and 'times new roman' .
Set the option values equal to the option text, including the single quotes where
required for the font name.
7. For the options created for the fontfamily selection list, enclose the generic font
names in an option group with the label generic and the specific fonts within an
option group with the label specific. .
8. After the fontfamily selection list, insert a label with the text font style . Add a
selection list for the fontstyle field with the option text and option values equal to
normal , italic , and oblique .
9. Add a label with the text font weight along with a selection list for the fontweight
field containing the option values and option text normal and bold .
10. Add a label with the text text Decoration along with a selection list for the
textdecoration field containing the option values and option text none ,
line-through , overline , and underline .
11. Add a label with the text text transform along with a selection list for the
texttransform field containing the option values and option text none , capitalize ,
lowercase , and uppercase .
12. Add a label with the text font variant along with a selection for the fontvariant
field containing the option text and values normal and small-caps .
13. Within the colors field set, add a label with the text font color (hexadecimal) . Add
an input box for the color field. Set the data type of the input box to color . Set the
default value to the text string #000000 . Add the placeholder text #rrggbb .
14. Add a label containing the text background color (hexadecimal) followed by an
input box for the backgroundcolor field. Set the data type of the input box to color .
Set the default value to the text string #ffffff . Add the placeholder text #rrggbb .
15. Within the sizes field set, add a label containing the text font size (px) followed by
a range slider for the fontsize field. Set the default value of the fontsize field to
14, the minimum to 8, and the maximum to 40. The range slider should move from
the minimum to the maximum in steps of 1 unit.