CSS3, and JavaScript 6e Tutorial 2, Case Problem 3 Pts Your Score 1 1 4 1 3 2 2 Description 1. Using your editor, open the cw class txt html and cw styles txt.css files from the htm02 case3 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.ess style sheet file. Explore 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 ew_class.html file. Study the content and structure of the cw_class.html file and then close the filc, saving your changes 4. Go to the ew_styles.css file in your editor. At the top of the file define the character encoding as utf-8 Explore 5. On the next linc, use the import rule to import the contents of the ew layout.css file into the style sheet 6. 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). 7. 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 8. Display all hl and 12 headings with normal weight 9. Create a style rule for every hypertext link ested within a navigation list that removes underlining from the text. 10. 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 padiding space to 1 pixel 11. Next, you'll 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) 12. The university name is stored in an hi heading Create a style rule for the h1 heading that is a direct child of the body header that sets the font size to 4w with the color value rgba(255,255,255,0.8). Display the text with the font stack: Limelight, cursive. Set the margin space to pixels 13. The last word of the h1 heading text is enclosed within a span element Create a style rule for the span clement nested within the hel heading that is nested within the body header, setting the text color to rgba(255, 255, 255. 2 4 4 4 4 0.41 2 2 14. 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 IS. For previously visited and univisited links within the mainLinks navigation list, create a style rule that displays she hypertext links in a white font 16. 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 rebat51.51.51.0.5). 17. Go to the Outline Styles section. In this section, you'll format the course outline that appears on the page's 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 rgb51, 51, 51) and the font size to 0.8cm 18. Horizontally center the h1 headings within the outline navigation list. 19. For the first level ol clements that are a direct child of the outline navigation list, create a se the 1 3 3 2 2 2 2 2 3 19. 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. 20. Display the second level of ol elements nested within the outline navigation list with an upper-case letter as the list marker. 21. Display all previously visited and unvisited links in the outline navigation list using the color value rgb(101, 101, 101). 22. Display hovered and active links in the outline navigation list using the color value rgb(97, 97, 211) with the text underlined. 23. 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). 24. Format the heading of this section by creating a style rule for the section header hi selector that sets the font size of 2.2em and the left padding space to 10 pixels. 25. 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. Explore 26. 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.) 27. 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. 28. 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. 29. 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 2-56. 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. TOTAL 2 2 3 N 2 1 70