HTML and CSS Reference
2. Go to the civilwar.htm fi le in your text editor. Take some time to review the content
and structure of the Web page. There are two navigation lists in the document. Peter
wants the fi rst navigation list to be displayed horizontally and the second navigation
list to be displayed vertically. Add the class attribute to each nav element, setting
the class values to horizontal and vertical respectively.
3. Save your changes to the fi le, and then go to the cw_styles.css fi le in your text editor.
4. Peter already has stored the layout styles in the cw_layout.css fi le. Directly after the
opening comments, use the @import rule to import this style sheet. Add a comment
describing the purpose of the @import rule.
5. Set the typeface of the page body to the font list Palatino Linotype , Book Antiqua ,
Palatino , and serif .
6. For every h1 through h6 heading, apply styles to: a) set the color to the HSL value
of ( 212, 0%, 0% ) with an opacity of 0.4 ; b) set the font family to Trebuchet MS ,
Helvetica , and sans-serif ; c) remove the boldface; and d) set the kerning and text
indent to 5 pixels.
7. For h1 headings that are direct children of a header element that is a direct child of
the body element, set the background color to the HSL value ( 212, 100%, 29% ).
8. For an unordered list within the horizontal navigation list, apply styles to: a) dis-
play the text in Century Gothic MS or another sans-serif font; b) set the font size to
14 pixels; c) display the text in bold ; d) set the kerning to 3 pixels and the line height
to 20 pixels; and e) remove the markers from the list.
9. For hypertext links within the horizontal navigation list, set the text to the HSL value
( 212, 100%, 70% ) and remove the underlining. When the mouse hovers over a
hypertext link in this list, change the font color to the HSL value ( 212, 100%, 29% ).
10. Set the background color of the vertical navigation list to the HSL value ( 32,
100%, 95% ).
11. For the h4 element within the vertical navigation list, create a style rule to: a) set the
color to the HSL value ( 32, 0%, 0% ) with an opacity of 0.5 ; and b) set the font size
to 18 pixels and the text indent to 15 pixels.
12. Display the ordered list items in the vertical navigation list in an outline style with
uppercase Roman numerals for the top level, and uppercase alphabetic letters for the
second level. Set the line height of the lists to 2em .
13. Set the color of the hypertext links in the vertical navigation list to the HSL value
( 212, 100%, 29% ) with an opacity of 0.6 . Remove the underlining from the hyper-
text links. If the user hovers the mouse pointer over a link in the list, increase the
opacity to 1.0 and display the underline.
14. Set the background color of the section element to the HSL value ( 212, 95%, 90% ).
15. For the fi rst paragraph after the h2 heading within the article element, create a
style rule to display the fi rst letter with a font size of 32 pixels.
16. For the paragraph within the page footer, create a style rule that sets the font size to
10 pixels and the line height to 30 pixels and centers the text.
17. Save your changes to the style sheet.
18. Return to the civilwar.htm fi le in your text editor and link the fi le to the cw_styles.css
19. Add style comments to document your work and then save your changes to the
20. Open the civilwar.htm fi le in your Web browser. Verify that the style layout and
design match that of the Web page shown in Figure 3-64. Verify that when you hover
the mouse pointer over the links in the horizontal navigation list, the text changes
color. Verify that when you hover the mouse pointer over the links in the vertical
navigation list, the text color changes and the text is underlined.
21. Submit your completed project to your instructor, in either printed or electronic
form, as requested.