Images are not needed, only codes are required.

Case Problem 2 Data Files needed for this Case Problem: cw_class_txt.html, cw_styles_txt.css, 1 CSS file, 2PNG files The Civil War and Reconstruction Peter Craft is a professor of military history at Mountain Crossing University. The university is offering a series of online courses, one of which is The Civil War and Reconstruction taught by Professor Craft. He has developed the online content and has had a colleague help with the page layout. Youve been asked to complete the project by creating text and color styles. A preview of the sample page is shown in Figure 260.

Complete the following: 1. Using your editor, open the cw_class_txt.html and cw_styles_txt.css files from the html02 c case2 folder. Enter your name and the date in the comment section of each file, and save them as cw_class.html and cw_styles.css respectively.

2. Go to the cw_class.html file in your HTML editor. Within the document head, create a link to the cw_styles.css style sheet file.

3. Using the Google Fonts website, locate the Limelight font. Copy the code for the link element to use this font and paste the copied code to the document head in the cw_class .html file.

4. Study the content and structure of the cw_class.html file and then close the file, saving your changes.

5. Go to the cw_styles.css file in your editor. At the top of the file, define the character encoding as utf-8.

6. On the next line, use the @import rule to import the contents of the cw_layout.css file into the style sheet.

7. Go to the Structural Styles section. Within that section create a style rule to set the background color of the browser window to rgb(151, 151, 151).

8. Create a style rule to set the background color of the page body to rgb(180, 180, 223) and set the body text to the font stack: Verdana, Geneva, sans-serif.

9. Display all h1 and h2 headings with normal weight.

10. Create a style rule for every hypertext link nested within a navigation list that removes underlining from the text.

11. Create a style rule for the footer element that sets the text color to white and the background color to rgb(101, 101, 101). Set the font size to 0.8em. Horizontally center the footer text, and set the top/bottom padding space to 1 pixel.

12. Next, youll format the body header that displays the name of the university. Go to the Body Header Styles section and, for the body > header selector, create a style rule that sets the background color to rgb(97, 97, 211).

13. The university name is stored in an h1 heading. Create a style rule for the h1 heading that is a direct child of the body header that sets the font size to 4vw with the color value rgba(255, 255, 255, 0.8). Display the text with the font stack: Limelight, cursive. Set the margin space to 0 pixels.

14. The last word of the h1 heading text is enclosed within a span element. Create a style rule for the span element nested within the h1 heading that is nested within the body header, setting the text color to rgba(255, 255, 255, 0.4). 15. Go the Navigation Styles section. In this section, you format the navigation list that has the ID mainLinks. For hypertext links within this navigation list, set the top and bottom padding space to 5 pixels.

16. For previously visited and unvisited links within the mainLinks navigation list, create a style rule that displays the hypertext links in a white font.

17. For hovered or active links within the mainLinks navigation list, create a style rule that displays the hypertext links in white with an opacity of 0.8 and set the background color to the value rgba(51, 51, 51, 0.5).

18. Go to the Outline Styles section. In this section, youll format the course outline that appears on the pages left column. The navigation list in this outline has the ID outline. Create a style rule for this navigation list that sets the text color to rgb(51, 51, 51) and the font size to 0.8em.

19. Horizontally center the h1 headings within the outline navigation list.

20. For the first level ol elements that are a direct child of the outline navigation list, create a style rule that sets the line height to 2em, the top/bottom margin to 0 pixels and the left/right margin to 5 pixels. Display the list marker as an upper-case Roman numeral.

21. Display the second level of ol elements nested within the outline navigation list with an upper-case letter as the list marker.

22. Display all previously visited and unvisited links in the outline navigation list using the color value rgb(101, 101, 101).

23. Display hovered and active links in the outline navigation list using the color value rgb(97, 97, 211) with the text underlined.

24. Go to the Section Styles section. In this section, format the description of the course. Create a style rule that sets the background color of the section element to rgb(220, 220, 220).

25. Format the heading of this section by creating a style rule for the section header h1 selector that sets the font size of 2.2em and the left padding space to 10 pixels.

26. Go to the Article Styles section and create a style rule for h2 headings within the article element that sets the font size to 1.4em.

27. Display the first letter of the first paragraph within the article element with a font size of 2em and vertically aligned with the baseline of the surrounding text. (Hint: Use the first-of-type pseudo-class and the first-letter pseudo-element.)

28. Information about Peter Craft has been placed in an aside element. Go to the Aside Styles section and create a style rule that sets the font size of text in the aside element to 0.9em.

29. For h1 headings nested within the aside element, create a style rule that sets the font size to 1.4em and horizontally centers the text.

30. Save your changes to the file and then open the cw_class.html file in your browser. Verify that the appearance of the page resembles that shown in Figure 260. Confirm that when you change the width of the browser window, the size of the page heading text changes in response to setting the heading text using the vw unit.