Make an article comfortable to read – CSS Practice

This article runs the full width of the screen, and its small label was meant to be capitals.

What to build

Styles for reading.

Requirements

p has max-width: 60ch and a unitless line-height of 1.6.
.label appears in capitals through text-transform, with a letter-spacing of 1px.
Links inside p are underlined.

Constraints

Do not change the text in the HTML.

Example

.tag { text-transform: uppercase; }

Why it works

Limiting the width helps the eye return to the next line, and text-transform changes the look while keeping the real text intact.

Hints

Hint 1

ch is a good unit for line length.

Hint 2

Use text-transform, and leave the words in the HTML as they are.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Reading</title>
  <style>
    p { max-width: 60ch; line-height: 1.6; }
    .label { text-transform: uppercase; letter-spacing: 1px; }
    p a { text-decoration: underline; }
  </style>
</head>
<body>
  <p class="label">Science</p>
  <p>Rice feeds more than half of the world. See the <a href="/farm">farming guide</a>.</p>
</body>
</html>

Lesson: Text and fonts →