font-family: Georgia, serif; lists typefaces in order of preference with a generic fallback last. font-size: 20px (or 1.25rem, relative to the root size), font-weight: 700 for bold, font-style: italic, line-height: 1.5 (a bare number scales with the font size), text-align: center, text-transform: uppercase, letter-spacing: 0.05em, and text-decoration: underline cover most typography.
Set font-family and line-height once on body and everything inherits them; headings then only need their own size and weight.
body { font-family: Georgia, serif; line-height: 1.5; }
h1 { text-align: center; }
.lead { font-size: 20px; }Your task
Set the body font family to Georgia, serif. Center the h1 with text-align. Make .lead 20px with font-size. Make h2 uppercase with text-transform.
Part of the final project. type sets the page's type: the font, the centered heading, the lead paragraph, the uppercase subheadings. It is saved in this browser and loaded into Project: a one-page site when you get there.
Hint 1
body { font-family: Georgia, serif; }
Hint 2
h1 { text-align: center; } .lead { font-size: 20px; } h2 { text-transform: uppercase; }
Show the solution
<!doctype html>
<html>
<head>
<style>
body { font-family: Georgia, serif; }
h1 { text-align: center; }
.lead { font-size: 20px; }
h2 { text-transform: uppercase; }
</style>
</head>
<body>
<h1>Typography</h1>
<p class="lead">The lead paragraph is larger.</p>
<h2>A subheading</h2>
<p>Ordinary text.</p>
</body>
</html>