Classes and groups – CSS Exercise with Solution

Style by class, and use a group.

What to build

Two rules.

Requirements

Only elements with the class sale have the colour crimson.
h1 and h2 both have the font family serif, set by a single rule with a comma.

Constraints

Do not change the HTML.

Example

.note { color: teal; }

Why it works

The class marks exactly which elements to change, and the group avoids writing the same declaration twice.

Hints

Hint 1

A class selector begins with a dot.

Hint 2

A comma separates the selectors in a group.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shop</title>
  <style>
    .sale { color: crimson; }
    h1, h2 { font-family: serif; }
  </style>
</head>
<body>
  <h1>Shop</h1>
  <h2>Tea</h2>
  <p class="sale">Half price today.</p>
  <p>Full price tomorrow.</p>
</body>
</html>

Lesson: Selectors: choosing what to style →