LESSON 5

Classes and IDs

Learning objective: Use classes and ids appropriately for styling.

Understand

Classes and ids are hooks you add to HTML for CSS to grab.

A class can be reused on many elements; an id must be unique on the page. Prefer classes for styling because they are reusable; save ids for unique elements or in-page links.

Analogy: A class is like a team jersey many players wear; an id is like a unique jersey number.

See It in Action

Class reused, id unique:

<p class="tip">A</p>
<p class="tip">B</p>
<div id="hero">Once only</div>
How it works: The tip class styles both paragraphs, while hero is used a single time for one unique element.

Try It Yourself

  1. Give three elements the same class and style them together.
  2. Give one element a unique id.
  3. Try reusing an id and note why it is discouraged.

Quick Quiz

Which can be reused on many elements?

Challenge

Style a set of cards with a shared class and one special card with an id.

Success condition: Multiple elements share one class and a single element uses a unique id.