Independent Challenge 4 – Explore As you continue your work creating the website for Eating Well in Season, a local food delivery company, you customize the design’s fonts and colors. a. In your editor, open HTM_E-11.html from the IC4 folder where you store your Data Files for this unit, save it as index.html, open HTM_E-12.css, then save it as styles.css. b. In the first comment section in each file, add your first and last names and today’s date where indicated, then save your changes to both files. c. Use google.com/fonts to locate the font named Alegreya Sans, choose the Normal 400 style, then copy the link element for the font’s stylesheet to the Clipboard d. Return to index.html in your editor, paste the link element just before the link element for your stylesheet, then save your changes. e. Return to styles.css in your editor, then in the body and page container section (the code following the body and page container comment), create a style rule that sets the font family for the body element to Alegreya Sans with a fallback to Arial, then Helvetica, and finally to the default sans-serif font. Also set the background color for the body element using the following RGB values: red: 170, green: 189, blue: 126. f. In the body and page container section, create a style rule for the p element that uses the font shortcut property to set the font size to 1.6em and the font family to Verdana with a fallback to Geneva and a generic font of sans-serif. g. In the reset styles section, create a style rule that specifies a font size of 12px for the html element. h. In the body and page container section, specify a background color for the element with the class value container using the following HSL values: hue: 53 degrees, saturation: 91%, light: 61%. (Hint: Use the syntax for the HSL color system rather than the RGB color system, and be sure to include the % symbol after the second and third values.) In the header section, use the same color as the text color for the h1 element nested in the header element. i. In the header section, set the background color for the header element using the following RGB values: red: 161, green: 127, blue: 67. j. In the header section, set the font weight of the h1 element nested in the header element to normal, the font size to 4.6em, and the line height to 0.8em. k. In the main content section, set the text color for h2 elements nested in the article element using the following RGB values: red: 152, green: 192, blue: 61. Also set the font size to 2.8em and the font weight to normal. l. In the sidebar section, set the font size for the h2 element nested in the aside element to 2.8em, the line height to 0.8em, and the font weight to normal. m. Return to index.html in your editor, in the footer element enclose each instance of the • character code in a span element, then save your changes. n. Return to styles.css in your editor, then in the footer section, add a style rule for span elements nested in the footer element that sets the font color using the following RGB values: red: 161, green: 127, blue: 67. o. In the body and page container section, create an inset box shadow for the element with the class value container using 0 horizontal offset, 0 vertical offset, 3px blur, 5px spread, and the RGB values red: 170, green: 189, and blue: 126. (Hint: Add the keyword inset to the property value to create an inset shadow.) Repeat for the header element in the header section and for the footer element in the footer section. Formatting Text with CSS 137 Word 137 HTML5 & CSS3 Independent Challenge 4 – Explore (continued) p. In the main content section, create an inset box shadow for the article element using 5px horizontal offset, 0 vertical offset, 3px blur, and the RGB values red: 170, green: 189, and blue: 126. (Hint: Add the keyword inset to the property value to create an inset shadow.) q. Save your changes, open index.html in a browser, then compare your document with FIGURE E-33. r. Use the developer tools in your browser to test the layout with each font family in the font stack for the body and p elements. s. Return to styles.css in your editor, add a comment at the bottom of the style sheet containing the text print styles, then use a media query to specify the following styles for printed output: • For the article, article h2, aside, body, .container, footer, header, header h1, and header p selectors, set the text color to #000, the background color to #fff, and the box shadow to none. • For the body element, set the maximum width to 100%. t. Below the media query, create a style rule that specifies 1in margins on all sides of a printed page. u. Save your changes, refresh or reload index.html in your browser, display a print preview of the document, then compare your preview to FIGURE E-34.