HTML and CSS Reference
In-Depth Information
3. Tammy wants to use a Web font for the heading on the page. She has stored the CSS
code for the font defi nition in the
CloisterBlack.txt
fi le. Open this fi le, copy the CSS
code, and then go to the
hs_styles.css
style sheet fi le. Paste the copied CSS code into
the fi le below the comment header.
4. Create a style rule for the page body, set the background color to
white
, and set the
default font list to
Trebuchet MS
,
Helvetica
, and
sans-serif
.
5. Create a style rule for unordered lists within the
nav
element that: a) sets the back-
ground color to the value (
248, 175, 175
); b) sets the line height to
3.5em
; c)
removes the bullet marker; d) sets the width of the
padding-left
property to
0
pix-
els; and e) indents the text
5
pixels. For the fi rst list item, create a style rule to: a)
increase the font size to
150%
; b) display the text in small caps; and c) display the
text in
bold
. For every hypertext link within the navigation list, create a style that
removes the underlining and sets the font color to
white
.
6. When the user hovers the mouse pointer over list items in the navigation list, change
the background color to the value (
148, 51, 62
). When the user hovers the mouse
pointer over a hypertext link in the navigation list, change the font color to
yellow
.
7. Tammy has placed a promotional photo in a fi gure box. Set the background color
of fi gure boxes to the color value (
248, 175, 175
) and
center
the contents of fi gure
boxes. For the caption within the fi gure box, add styles to: a) set the font size to
14
pixels; b) display the text in
italic
; and c)
center
the caption text.
8. For
h1
headings nested within the
section
element, create a style rule to: a) set the
background color to the value (
148, 51, 62
); b) set the font color to
white
; c) use the
font list containing the
CloisterBlack
and
fantasy
fonts; d) set the font size to
2.5em
;
e) remove boldface from the text; f) set the kerning to
0.3em
; g) set the line height to
2em
; and h) indent the text
5
pixels.
9. For
h2
headings nested within the
section
element, create a style rule to: a) set the
background color to the value (
182, 134, 52
); b) set the font color to
white
for older
browsers and to the color value (
255, 255, 255
) with an opacity of
0.8
for newer
browsers; c) set the font weight to
normal
; d) set the kerning to
0.7em
; and e) indent
the text
1em
.
10. For unordered lists directly after
h2
headings nested within the
section
element,
create a style rule that displays the image fi le
fl ake.png
as the bullet marker.
11. For
address
elements nested within the
footer
element, create a style rule to: a)
set the background to the color (
148, 51, 62
); b) set the font color to
white
for older
browsers and to the value (
255, 255, 255
) with 80% opacity for newer browsers; c)
change the font style to
normal
weight in small caps,
0.8em
in size with a line
height of
4em
, and use fonts from the list
Palatino
Linotype
,
Book Antiqua
,
Palatino
,
and
serif
; and d)
center
the address text.
12. Add comments to the style sheet to document what you've done.
13. Save your changes to the
hs_styles.css
style sheet.
14. Return to the
holiday.htm
fi le in your text editor and link to the
hs_styles.css
fi le.
15. Open the
holiday.htm
fi le in your Web browser and verify that the page matches the
page shown in Figure 3-61.
16. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
