Let inheritance do the work – CSS Practice Problem

This stylesheet repeats itself. Rewrite it so that inheritance does most of the work.

What to build

A shorter stylesheet.

Requirements

font-family: sans-serif and color: #333333 are set once, on body.
No other rule sets font-family.
Links inside .card take their colour from their parent, using inherit.
Each .card has a 1px solid border. Paragraphs inside have no border.

Constraints

Use no more than three rules.

Example

a { color: inherit; } makes a link match the text around it.

Why it works

Text styles flow down the tree by themselves. Links are an exception because the browser's stylesheet targets them directly, so they need inherit to rejoin the flow.

Hints

Hint 1

Text properties can be set once on body.

Hint 2

A link has its own colour from the browser, so it needs inherit.

Hint 3

Borders do not inherit, so each card needs its own.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherit</title>
  <style>
    body { font-family: sans-serif; color: #333333; }
    .card { border: 1px solid; }
    .card a { color: inherit; }
  </style>
</head>
<body>
  <h1>Cards</h1>
  <div class="card"><p>Read the <a href="/guide">guide</a>.</p></div>
</body>
</html>

Lesson: The cascade, specificity and inheritance →