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.
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.
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 1 images
