Coding Lesson

← All lessons

CSS: Appearance

Reusable classes

Lesson 8 of 18 · About 20 minutes

Your goal: Apply one style to several elements.

Learn

A class names a group of elements. A CSS selector beginning with a dot styles that class. You can reuse a class; an id should identify one element.

View starter code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style>
      .highlight {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <h1>My hobby</h1>
    <p>I enjoy learning something new.</p>
    <p class="highlight">A useful tip.</p>
    <p>Another tip.</p>
  </body>
</html>

Your challenge

Give both tips the highlight class, and change its background and text colour.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox
Show a hint

Add class="highlight" to the second p. Keep the dot in the CSS selector.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

.highlight {
  background-color: #dbeafe;
  color: #172554;
}

<p class="highlight">Another tip.</p>

Check your work

Both tips receive the same style, while the introductory paragraph stays unchanged.

Completion is your own check, not an automatic grade.