Classes and IDs

Mission

The makers' fair program page needs three quick-jump stops — about, projects, and contact — and a row of project cards. Give each stop a unique landing point while keeping the cards easy to style as a group.

What you'll build

A makers’ fair program with navigation links to three stops and reusable exhibit cards. One card gets a second class as a future styling hook.

One name or a reusable label

Use class for a label that can appear on many elements. One element can carry several class names, separated by spaces.

<div class="card">Solar oven</div>
<div class="card">Seed library</div>
<div class="card featured">Repair map</div>

In CSS, a dot selects a class:

.card {
    border: 1px solid #ccc;
    padding: 1rem;
}

.featured {
    background-color: gold;
}

Use id for one unique element on the page. An ID becomes an anchor target when a link uses # followed by that value.

<nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
</nav>

<section id="about"><h2>About</h2></section>
<section id="projects"><h2>Projects</h2></section>
<section id="contact"><h2>Contact</h2></section>

CSS uses # before an ID: #contact { ... }.

Checkpoint

Run the page and select each navigation link. It should land on the section with the same ID. If a link does not move, compare its href="#..." value with the section's id; they must match exactly.

Class vs. ID

Payoff

Your fair page can now link directly to each stop and style every project card with one reusable label.