HTML Classes and IDs

Learn how to identify and style HTML elements like a pro!

What are Classes and IDs?

Classes and IDs are special attributes that help you identify and style HTML elements. They're like name tags for your HTML!

  • Class: Can be used on multiple elements (reusable)
  • ID: Should be unique to one element (one per page)

Think of it like this: Class is like a school uniform — many students wear it. ID is like a student ID number — each person has their own unique one!

HTML Classes

The class attribute lets you group similar elements together and apply the same styles to all of them.

Example: Using Classes


<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">This one too!</p>
<p>This is normal text.</p>

<style>
.highlight {
    background-color: yellow;
    font-weight: bold;
}
</style>

Key Point: Use a dot (.) before the class name in CSS!

Multiple Classes on One Element

Example: Multiple Classes


<!-- Separate multiple classes with spaces -->
<p class="highlight important large">Important text!</p>

<style>
.highlight { background-color: yellow; }
.important { color: red; }
.large { font-size: 24px; }
</style>

Tip: An element can have as many classes as you want — just separate them with spaces!

Class Naming Rules

Example: Good vs Bad Class Names


<!-- ✅ Good: Descriptive names -->
<div class="container"></div>
<p class="error-message"></p>
<button class="btn-primary"></button>

<!-- ❌ Bad: Generic or confusing names -->
<div class="div1"></div>
<p class="red"></p>
<button class="thing"></button>
  • Start with a letter (a-z or A-Z)
  • Can contain letters, numbers, hyphens (-), underscores (_)
  • Case-sensitive (Main is different from main)
  • Use descriptive names that explain purpose

HTML IDs

The id attribute gives a unique identifier to an element. Each ID should only be used once per page.

Example: Using IDs


<header id="main-header">
    <h1>My Website</h1>
</header>

<section id="about">
    <h2>About Us</h2>
</section>

<style>
#main-header {
    background-color: navy;
    color: white;
}

#about {
    padding: 20px;
}
</style>

Key Point: Use a hash (#) before the ID name in CSS!

IDs Must Be Unique

Example: Correct ID Usage


<!-- ❌ WRONG: Same ID used twice -->
<div id="special">First div</div>
<div id="special">Second div</div>

<!-- ✅ CORRECT: Each ID is unique -->
<div id="header">Header</div>
<div id="footer">Footer</div>

<!-- ✅ CORRECT: Use classes for multiple elements -->
<div class="box">First box</div>
<div class="box">Second box</div>

Important: If you need to style multiple elements the same way, use a class, not an ID!

Class vs ID: When to Use What?

Example: Class vs ID in Action


<!-- ID: Unique elements -->
<nav id="main-navigation">...</nav>
<footer id="page-footer">...</footer>

<!-- Class: Reusable styles -->
<button class="btn">Submit</button>
<button class="btn">Cancel</button>
<button class="btn">Delete</button>

<!-- Combining both -->
<div id="hero" class="section full-width">
    <h1 class="title">Welcome!</h1>
</div>
  • Use ID for: Unique sections (header, footer, main navigation)
  • Use Class for: Styling multiple elements (buttons, cards, text styles)
  • You can use both ID and class on the same element!

Practical Example

Example: Real-World Usage


<!DOCTYPE html>
<html>
<head>
    <style>
        /* ID styles (unique elements) */
        #header { background: #333; color: white; padding: 20px; }
        #sidebar { width: 200px; float: left; }
        
        /* Class styles (reusable) */
        .button { 
            padding: 10px 20px; 
            background: blue; 
            color: white; 
        }
        .card { 
            border: 1px solid #ddd; 
            padding: 15px; 
            margin: 10px; 
        }
        .text-center { text-align: center; }
    </style>
</head>
<body>
    <header id="header">
        <h1 class="text-center">My Website</h1>
    </header>
    
    <aside id="sidebar">
        <div class="card">
            <h3>Menu</h3>
        </div>
    </aside>
    
    <main>
        <div class="card">
            <h2>Welcome</h2>
            <p>Content here</p>
            <button class="button">Learn More</button>
        </div>
        
        <div class="card">
            <h2>Features</h2>
            <p>More content</p>
            <button class="button">Get Started</button>
        </div>
    </main>
</body>
</html>

Classes and IDs with JavaScript

Example: Selecting Elements


<button id="submit-btn">Submit</button>
<p class="message">First message</p>
<p class="message">Second message</p>

<script>
    // Select by ID (returns one element)
    const button = document.getElementById('submit-btn');
    
    // Select by class (returns all matching elements)
    const messages = document.getElementsByClassName('message');
    
    // Modern way (querySelector)
    const oneBtn = document.querySelector('#submit-btn');
    const allMessages = document.querySelectorAll('.message');
</script>

Note: IDs make it easy to target specific elements with JavaScript!

Using IDs for Page Links

Example: Jump Links (Anchors)


<!-- Navigation with jump links -->
<nav>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

<!-- Sections with IDs -->
<section id="about">
    <h2>About Us</h2>
    <p>About content...</p>
</section>

<section id="services">
    <h2>Our Services</h2>
    <p>Services content...</p>
</section>

<section id="contact">
    <h2>Contact Us</h2>
    <p>Contact form...</p>
</section>

Cool Trick: Clicking links with # jumps to the element with that ID!

Quick Comparison Table

Class vs ID Reference


┌─────────────────┬──────────────────┬──────────────────┐
│   Feature       │   Class          │   ID             │
├─────────────────┼──────────────────┼──────────────────┤
│ Symbol in CSS   │ . (dot)          │ # (hash)         │
│ Usage           │ Multiple times   │ Once per page    │
│ Multiple values │ Yes              │ No               │
│ Purpose         │ Styling groups   │ Unique elements  │
│ Example         │ class="btn"      │ id="header"      │
│ CSS Selector    │ .btn { }         │ #header { }      │
└─────────────────┴──────────────────┴──────────────────┘

Common Mistakes to Avoid

Example: What NOT to Do


<!-- ❌ WRONG: Using same ID twice -->
<div id="box">First</div>
<div id="box">Second</div>

<!-- ❌ WRONG: Spaces in class/id names -->
<div class="my box"></div>  <!-- This creates TWO classes -->
<div id="main header"></div> <!-- Invalid! -->

<!-- ❌ WRONG: Starting with a number -->
<div class="1st-item"></div>
<div id="2-column"></div>

<!-- ✅ CORRECT -->
<div class="box">First</div>
<div class="box">Second</div>
<div class="my-box"></div>
<div id="main-header"></div>
<div class="first-item"></div>
<div id="two-column"></div>

Best Practices

  • Use classes for styling multiple similar elements
  • Use IDs for unique elements and page navigation
  • Keep names descriptive and meaningful
  • Use hyphens (-) to separate words (kebab-case)
  • Never use the same ID twice on one page
  • Prefer classes over IDs for styling (more flexible)
  • Combine classes for complex styling needs

Golden Rule: When in doubt, use a class. IDs are for special, unique elements only!