Move inline styles into a stylesheet – CSS Practice

The same inline style is pasted on three paragraphs. Replace it with one rule.

What to build

The same page with a single rule in a style element.

Requirements

All three paragraphs still have the colour dimgray and the font size 16px.
The h1 still has the colour navy.
No element has a style attribute.

Constraints

Use exactly two rules.

Example

p { color: dimgray; } styles every paragraph at once.

Why it works

One rule replaces repeated code, so a later change happens in one place instead of many.

Hints

Hint 1

One rule for all three paragraphs is enough.

Hint 2

Delete the style attributes once the rule exists.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>News</title>
  <style>
    h1 { color: navy; }
    p { color: dimgray; font-size: 16px; }
  </style>
</head>
<body>
  <h1>Campus news</h1>
  <p>The library opens late.</p>
  <p>Exams start in May.</p>
  <p>The cafe has new hours.</p>
</body>
</html>

Lesson: What CSS is and how it reaches a page →