HTML and CSS Reference
In-Depth Information
Complete the following:
1. Open the
bmtourtxt.htm
and
mw_stylestxt.css
fi les from the tutorial.03\case2
folder. Enter
your name
and
the date
in the comment section of each fi le. Save the
fi les as
bmtour.htm
and
mw_styles.css
in the same folder.
2. Return to the
bmtour.htm
fi le in your text editor. Link the fi le to the
mw_layout.css
style sheet. Take some time to review the contents and structure of the document.
3. You need to name different elements within the document using the
id
attri-
bute. Add the following ids to the document: a) name the fi rst
header
element
pageheader
and the second
header
element
articleheader
; and b) name the fi rst
section
element
leftsection
and the second
section
element
rightsection
.
4. Save your changes to the fi le and then go to the
mw_styles.css
style sheet in your
text editor.
5. Set the default font for the page body to a font list containing
Tahoma
,
Geneva
, and
sans-serif
.
6. For the
articleheader
id, apply a style rule that: a) sets the font size to
18
pixels
and removes boldface; b) sets the kerning to
7
pixels; and c) centers the text.
7. Set the background color of the navigation list to the value (
125, 120, 89
) and set the
line height to
3em
. Remove the bullet markers from the navigation list.
8. For hypertext links within the navigation list, create a style rule that: a) sets the font
color to
white
for older browsers, and to
white
with 50% opacity for newer brows-
ers; and b) removes the underlining from the link text.
9. When a user hovers the mouse pointer over list items in the navigation list, change
the background color to the value (
131, 121, 36
) and display the image fi le
wheelmarker.png
as the bullet image. When a user hovers the mouse pointer over a
hypertext link in the navigation list, change the font color to
yellow
for older brows-
ers, and to
white
with 100% opacity for newer browsers.
10. For paragraphs that are direct children
of the
leftsection
id, set the font size to
22
pixels. Also, for the fi rst paragraph that is also a direct child of the
leftsection
id, display the fi rst line of the paragraph in uppercase.
11. For the
blockquote
element, create a style rule to set: a) the background color to
(
131, 121, 36
); b) the font color to
white
; c) the font size to
16
pixels; and d) the font
family to
Comic Sans MS
,
Times
, and cursive.
12. For paragraphs within the
blockquote
element, create styles to insert a
double
quotation mark
directly before and after the text of the paragraph.
13. For
h1
headings within the
rightsection
id, create a style rule to: a) set the font
size to
22
pixels and the kerning to
3
pixels; b) remove the boldface from the text;
and c)
center
the text. For
h2
headings within the
rightsection
id, create a style
rule to: a) set the font size to
18
pixels; b) right-align the text; and c) remove the
boldface from the text. Finally, for paragraphs within the
rightsection
id, create
a style rule to: a) set the font color to
gray
; b) set the font size to
14
pixels; and c)
justify
the text.
14. For
address
elements within the page footer, create a style rule to: a) set the font
size to
16
pixels; b) remove the italic style from the address; and c)
center
the text.
15. Add style comments to document your work and then save your changes to the fi le.
16. Return to the
bmtour.htm
fi le in your text editor and link that fi le to the
mw_styles.css
style sheet.
17. Open the
bmtour.htm
fi le in your Web browser and confi rm that it matches the
design and layout shown in Figure 3-63.
18. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
