1. In your text editor, open the historytxt.css and lincolntxt.htm files from the tutorial.04\case1 folder. Enter your name and the date in the comment section of each file. Save the files as history.css and lincoln.htm, respectively.

2. Return to the lincoln.htm file in your text editor and take some time to review the content and structure of the file. Link the document to the history.css style sheet. Close the file, saving your changes.

3. Go to the history.css file in your text editor. Create a style rule to display the header, section, and nav elements as blocks.

4. Set the default padding and margin space for every element to 0 pixels.

5. Define a style rule for the header element to: a) set the background color to the value (51, 51, 51); b) center the contents of the header element; and c) set the width to 55 em. Set the height of the inline image within the header to 4 em.

6. Float the navigation list on the left page margin, setting the width to 15 em and the background color to the value (51, 51, 51).

7. For list items within the navigation list, create a style rule to: a) set the typeface to Century Gothic or sans-serif; b) set the font size to 0.7 em; c) remove the list markers; d) set the line height to 1.4 em; and e) set the left and bottom margins to 1 em and 1.2 em, respectively.

8. For hypertext links within the navigation list, set the text color to the value (212, 212, 212) and remove the underlining. When the user hovers the mouse pointer over these links, change the text color to white.

9. For the speech section of the page, create a style rule to: a) set the background color to the value (212, 212, 212); b) set the width to 40 em and float the section on the left; and c) display the text in a Palatino Linotype, Book Antiqua, Palatino, or serif font.

10. For the h1 heading within the speech section, create a style rule to: a) set the background color to the value (51, 51, 51); b) set the text color to the value (212, 212, 212) and the font size to 2 em; and c) center the text.

11. For the paragraphs within the speech section, set the font size to 0.9 em and the margin size to 1 em.

12. Annie wants to create a drop-cap effect for the first letter in the first line of the first paragraph in the speech section. Using the first-of-type pseudo-class and the first-letter pseudo-element in your style rule selector, create this drop cap by: a) floating the first letter on the left; b) setting the font size and line height to 4 em and 0.8 em, respectively; c) setting the right margin to 0.3 em; d) setting the right and bottom padding to 0.2 em; and e) adding a solid black border 0.02 em in width to the right and bottom edge of the letter.

13. Display the text of the first line of the first paragraph in the speech section in uppercase letters.

14. Next, you’ll create the irregular line wrap shown in Figure 4-78. Stack the 10 slices of the Lincoln image by creating a style rule for the inline image elements within the speech section to: a) float each image on the right once the right margin is clear; and b) set the height of each image to 4 em.

15. Add appropriate style comments to your file to document your work and then save your changes.

16. Open the lincoln.htm file in your Web browser. Verify that the layout resembles that shown in Figure 4-78. (Note: Safari for the Macintosh does not at the time of this writing support the first-line pseudo-class with uppercase letters. Also, you might notice a slight difference in the layout with browsers running on the Macintosh, iPhone, or iPad.)

17. Using the Options or Preferences dialog box of your browser, increase and decrease the browser’s default font size. Verify that as the font size changes, the layout and size of the inline images in the page change in proportion.

18. Submit your completed files to your instructor, in either printed or electronic form, as requested.