HTML Classes & Id Explained — CSS Targeting & Anchor Links

HTML classes and id attributes let you identify and target elements — classes for grouping multiple elements with the same style, and ids for uniquely identifying a single element.

What You’ll Learn

By the end of this tutorial, you’ll know when to use class vs id, how to apply multiple classes to one element, how to link to specific sections with id anchor links, and how CSS selects elements by class and id.

Why Classes and Id Matter

Imagine a classroom. Classes are like team jerseys — many students can wear the same jersey (e.g., “soccer team”). Ids are like student ID numbers — each student has a unique one.

On a web page, you use class when you want to style multiple elements the same way (all buttons, all cards, all links). You use id when you need to target one specific element — for anchor links, JavaScript, or unique styling.

Real-world use: Every CSS framework (Bootstrap, Tailwind CSS) relies on classes. Every “Jump to section” link uses ids. Every JavaScript script that manipulates the DOM uses both.

Where This Fits in Your Learning Path

    flowchart LR
    A["Block & Inline"] --> B["**Classes & Id**"]
    B --> C["Buttons"]
    C --> D["Iframes"]
    D --> E["Head & Meta"]
    E --> F["HTML & JavaScript"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff
  

The class Attribute — Reusable Labels

Use class when you want to apply the same styling or behavior to multiple elements:

<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">This one too — same class, same style.</p>
<p class="highlight important">This one has TWO classes: highlight and important.</p>

.highlight { background: yellow; }
.important { font-weight: bold; color: red; }

Rules for Classes

Multiple Classes

You can add more than one class to an element by separating them with spaces:

<!-- This element has both "card" and "featured" classes -->
<div class="card featured">
  <h2>Featured Card</h2>
</div>

This is powerful because you can combine general styles (.card — border, padding, background) with specific overrides (.featured — gold border, different background).

The id Attribute — Unique Identifier

Use id when you need to target exactly one element. Each id must be unique on the page — no two elements can share the same id.

<h1 id="page-title">Welcome to My Site</h1>
<p id="intro">This is the introduction paragraph. It's the only element with this id.</p>

#page-title { color: navy; font-size: 2.5rem; }
#intro { font-size: 1.2em; line-height: 1.8; }

Rules for Ids

Ids for Anchor Links

One of the most common uses of id is creating jump links. When a user clicks a link like <a href="#section-2">, the browser scrolls to the element with id="section-2":

<a href="#section-2">Jump to Section 2</a>

<h2 id="section-1">Section 1</h2>
<p>Content here...</p>

<h2 id="section-2">Section 2</h2>
<p>You jumped here!</p>

This works for same-page navigation, table of contents, and “back to top” links.

Class vs Id — When to Use Which

Choosing between class and id is a common point of confusion. Here’s a simple rule:

When in doubt, use class. Classes are more flexible and reusable. Only use id when you have a specific reason (anchor link, unique JavaScript target).

Using Classes & Id Together

A single element can have both a class and an id — they serve different purposes:

<div class="card" id="card-1">
  <h2 class="card-title">Card One</h2>
  <p class="card-text">Content here...</p>
</div>
<div class="card" id="card-2">
  <h2 class="card-title">Card Two</h2>
  <p class="card-text">More content...</p>
</div>

Here:

• class="card" is shared by both divs — they get the same card styling
• id="card-1" and id="card-2" are unique — you can link to or script each one individually

Common Mistakes

1. Reusing the Same Id

<!-- ❌ Wrong: same id on two elements -->
<div id="header">Header</div>
<div id="header">Another header</div>

<!-- ✅ Correct: use class for repeated elements -->
<div class="header">Header</div>
<div class="header">Another header</div>

Duplicate ids break accessibility, CSS targeting, and JavaScript. Always keep ids unique.

2. Ids with Spaces

<!-- ❌ Wrong: spaces are not allowed in ids -->
<div id="my section">Content</div>

<!-- ✅ Correct: use hyphens or underscores -->
<div id="my-section">Content</div>

3. Starting an Id with a Number

<!-- ❌ Wrong: id starting with a number -->
<div id="1st-section">Content</div>

<!-- ✅ Correct: start with a letter -->
<div id="section-1">Content</div>

CSS selectors like #section-1 work fine, but #1st-section is invalid CSS.

4. Overusing Id for Styling

<!-- ❌ Wrong: id for reusable styles — can't reuse -->
<div id="card">...</div>
<div id="card2">...</div>
<div id="card3">...</div>

<!-- ✅ Correct: class for reusable styles -->
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>

Ids have higher CSS specificity than classes, making overrides difficult. Use classes for styling.

5. Forgetting That Class Names Are Case-Sensitive

<!-- ❌ Wrong: CSS targets .Highlight, HTML uses .highlight -->
<div class="highlight">...</div>

<!-- In CSS: -->
.Highlight { background: yellow; } /* won't match */

<!-- ✅ Correct: match case exactly -->
<div class="highlight">...</div>

<!-- In CSS: -->
.highlight { background: yellow; } /* matches */

Try It Yourself

Edit this sandbox — try adding classes, changing ids, and using anchor links:

Practice Questions

Q1: What’s the key difference between class and id?

Q2: How do you add multiple classes to an element?

Q3: What CSS selector targets an element with id="intro"?

Q4: How do you create a link that jumps to a section on the same page?

Q5: Can two different elements have the same id on one page?

Challenge

Create a “Long Article Page” with:

• A table of contents at the top using anchor links (ids)
• At least 4 sections, each with a unique id
• Different card styles using classes (e.g., .info-card, .warning-card, .tip-card)
• Each card should have a unique id AND a shared class

Real-World Task

Inspect any web page with your browser’s developer tools:

• Find elements with classes and ids in the Elements panel
• Notice how CSS frameworks like Bootstrap use class names like btn, container, row
• Check how anchor links scroll to specific sections

Frequently Asked Questions

What’s Next?

Now let’s dive into interactive elements:

What’s Next

Congratulations on completing this Html Classes Id tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!