Home › Learn › HTML and CSS › CSS basics

Text styling

Lesson 9 of 20. Fonts, sizes, alignment, and transforms.

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>
Preview

    Renders in the preview as you type; the checks read the rendered page.