Repair a broken stylesheet – CSS Practice Problem

This stylesheet has four mistakes and most of it does nothing.

What to build

The same stylesheet, working.

Requirements

The h1 is navy and 40px.
The p is dimgray.
The a is crimson.
The li has a font size of 20px.

Constraints

Keep one rule for each of the four elements.

Example

A missing semicolon makes the browser read navy font-size: 40px as one strange value, and it throws away both.

Why it works

Each mistake made the browser skip a piece. Once the syntax is valid, every declaration applies.

Hints

Hint 1

Look for a missing semicolon, a missing brace, a misspelled property and an equals sign.

Hint 2

The browser does not report any of these, so read slowly.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fix me</title>
  <style>
    h1 {
      color: navy;
      font-size: 40px;
    }
    p {
      color: dimgray;
    }
    a {
      color: crimson;
    }
    li {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Links</h1>
  <p>Some useful places.</p>
  <ul><li><a href="/a">Library</a></li></ul>
</body>
</html>

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