CSS
CSS: ID vs Class — What’s the Difference?
When writing CSS, two of the most commonly used selectors are ID and Class. At first glance, they may seem similar—they both allow you to apply styles to HTML elements—but they serve very different purposes.
In this guide, we’ll break down the key differences between IDs and Classes, explain when to use each, and provide practical examples to help you make the right choice in your next project.
🆔 What is an ID in CSS?
An ID is a unique identifier for a specific HTML element. It’s defined using the id
attribute and selected in CSS using a #
symbol.
✅ Example:
<h1 id="main-title">Welcome to My Website</h1>
#main-title {
color: darkblue;
font-size: 32px;
}
💡 Key Features of ID:
- Should be unique in a document
- Used for targeting one specific element
- Can be used for JavaScript hooks and anchor links
🎯 What is a Class in CSS?
A Class is a reusable style rule that can be applied to multiple elements. It’s defined using the class
attribute and selected in CSS with a .
(dot).
✅ Example:
<p class="highlight">This is important text.</p>
<p class="highlight">So is this one!</p>
.highlight {
color: red;
font-weight: bold;
}
💡 Key Features of Class:
- Can be reused on multiple elements
- Great for grouping and applying shared styles
- Can apply multiple classes to one element
🧠 ID vs Class: Key Differences
Feature | ID (# ) | Class (. ) |
---|---|---|
Uniqueness | Must be unique | Can be reused |
Syntax | #id | .class |
Reusability | ❌ One element only | ✅ Multiple elements |
Specificity | High (stronger) | Medium (weaker) |
JavaScript usage | Common for targeting | Common for groups |
Multiple allowed | ❌ Only one per element | ✅ Multiple per element |
⚠️ Specificity: Why IDs Override Classes
CSS uses a system called specificity to decide which styles apply when there are conflicts. IDs have higher specificity than classes.
#title {
color: red;
}
.title {
color: blue;
}
<h1 id="title" class="title">Hello!</h1>
✅ The text will be red, because the ID style overrides the class style due to higher specificity.
🛠️ When to Use ID vs Class?
Use Case | Recommended Selector |
---|---|
Styling a single unique element | ID (# ) |
Styling multiple elements the same way | Class (. ) |
Layout and component styles | Class |
JavaScript element targeting | ID (for simplicity) |
Reusable UI components | Class |
🚫 Best Practices
- ✅ Use classes for general styling and layout.
- ✅ Use IDs sparingly, only for unique elements like
<header>
,<footer>
, or for anchor links. - ❌ Avoid using the same ID on more than one element.
- ❌ Don’t rely too heavily on IDs for styling—they’re harder to override later.
✅ Final Thoughts
While both IDs and Classes help you style HTML elements, knowing when and how to use them correctly is key to writing clean, maintainable CSS.
- Use classes when you need flexibility and reuse.
- Use IDs when you need to target something very specific and unique.
Mastering this difference early will help you write better, more scalable CSS as your projects grow.