Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

ills Review Declare a font family a. In your editor, open the file HTM_E-3.html

ID: 3753095 • Letter: I

Question

ills Review Declare a font family a. In your editor, open the file HTM_E-3.html from the SR folder where you store your Data Files for this unit, save it as history.html, then repeat to save the file HTM_E-4.cs as styles.css. in the comment section at the top of each file, enter your fist and last names and today's date, then save your changes. c. Preview history.html in your browser rn to styles.css in your editor, in the body and container section (the code following the body and contalner commen ent), create a rule for the p element, then add a declaration to style the text with the font stack Arial, Helvetica, sans-serif. d. Retur d. Return your changes, then refresh or reload history html in your browser and verify that all p elements are styled with the appropriate font. f. Use the too vloper tools in your browser to test the layout with each font family in the font sack. layfai, then add the font Playtair Display to your colletion.(Hlne Do not elect rmal 400 and Ultra-Bold 900 styles, then copy the generated link element. n your editor, paste the 1ink element into the head section before the link element for 2. Use a custom font. a. In your o b. arwser, open google.com/fonts on the font name Playfair Playfair Display SC.) t chs i s C. Click ick Use, select the and d. Returno styles.cs, then save your changes. 129

Explanation / Answer

history.html

<!--First name -->
<!--Last name -->
<!--Date -->

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,900" rel="stylesheet">
</head>
<body>
<article>
<p></p>
<p><span class="title">Toronto Times</span></p>
<article>
<footer>
<span class="accent">(416) 555-3337</span>
</footer>
</body>
</html>

style.css

html{
font-size: 12px;
}

h1, h2{
font-family: "Playfair Display", "Times New Roman", Times, serif;
}

body, container p {
font-family: Arial, Helvetica, sans-serif;
}

p{
font-size: 1.6cm;
line-height: 1.4cm;
}

h1{
font-size: 4cm;
font-weight: 900;
}

h2{
font-size: 2.8cm;
text-shadow: 2px -1px 2px rgb(255,204,102);
}

.contrastbox{
font-weight: bold;
background-color: #ddd;
border-style: solid;
border-color: #777;
border-width: 1px;
box-shadow: 3px 3px 0 #777;
}

.accent{
font-weight: bold;
}

.title{
font-style: italic;
}

article .firstparagraph p::first-letter {
font-size: 3cm;
height: 0.9cm;
float:left;
}

body{
background-color: #ddd;
}

.container{
background-color: rgb(255, 204, 102);
}

article{
background-color: #fff;
}