HTML and CSS Reference
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
5. Set the default font for the page body to a font list containing Tahoma , Geneva , and
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,