HTML and CSS Reference
In-Depth Information
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
style sheet.
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.
