Complete the following:

1. Use your text editor to open the holidaytxt.htm and hs_stylestxt.cssfi les from the

tutorial.03 eview folder included with your Data Files. Enter your name and the

datewithin the comment section of each fi le, and then save them asholiday.htm

and hs_styles.css, respectively.

2. Go to the holiday.htmfi le in your text editor and take some time to review the con-

tents and structure of the document. Link the fi le to thehs_layout.cssstyle sheet fi le.

Open the Web page in your browser to study its current layout.

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 theCloisterBlack.txtfi le. Open this fi le, copy the CSS code, and then go to the hs_styles.cssstyle 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 5pixels. 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 centerthe 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 lefl 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.htmfi le in your text editor and link to thehs_styles.cssfi le.

15. Open the holiday.htmfi le in your Web browser and verify that the page matches the page shown in Figure 3-61 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 theCloisterBlack.txtfi le. Open this fi le, copy the CSS

code, and then go to the hs_styles.cssstyle sheet fi le. Paste the copied CSS code into

the fi le below the comment header.