Home » All Lessons » Classes and IDs

LESSON 3.09

Classes and IDs

Target exactly the elements you want to style

Learn how to use classes and IDs to apply CSS styles precisely, whether you're targeting one element, a group, or something that appears only once on the page.

💡 The Concept

CSS classes and IDs are the two main ways to target specific elements and apply styles to exactly the right parts of a page. When you first start writing CSS, you might style elements by their tag name; making all <p> tags one color or all <h1> tags a certain size. But what happens when you need one specific paragraph to look different from the rest? Or when you want to highlight just a few words inside a sentence? That’s where CSS classes, IDs, and the <span> and <div> tags come in. These tools give you surgical precision over your styling, and mastering them is one of the most important skills you’ll develop as a web developer.

Understanding CSS Selectors: Beyond Element Names

Before diving into classes and IDs, let’s quickly recap CSS syntax. Every CSS rule has three parts: a selector (which targets the HTML element), a property (what you want to change), and a value (how you want to change it).

body {
  background-color: lightgray;
  color: black;
}

In this example, body is the selector, and it targets the entire <body> element. But selectors aren’t limited to HTML tag names. You can also target elements using classes and IDs, two HTML attributes specifically designed to give you finer control.

Classes: Reusable Styles for Multiple Elements

A class is an attribute you add to any HTML element to group it with other elements that should share the same styling. You can apply the same class to as many elements as you want; that’s what makes classes so powerful.

Adding a Class in HTML

In HTML, you add a class using the class attribute:

<p class="highlight">This paragraph is highlighted.</p>
<p>This paragraph is not.</p>

Targeting a Class in CSS

In your CSS, you target a class by placing a dot (period) before the class name:

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

Notice the difference between the two languages: in HTML you write class="highlight", but in CSS you write .highlight. This is a common source of confusion for beginners, so take a moment to commit it to memory.

HTML vs the CSS language. CSS uses a . and for HTML you type out the word class. — In HTML, you write out the word “class.” In CSS, you use a dot (.) before the class name.

Key Rules for Classes

A class can be used on multiple elements on the same page.
An element can have multiple classes, separated by spaces: class="highlight large"
Class names should be descriptive and use lowercase letters and hyphens (e.g., highlighed-text ).
Class names cannot start with a number.

IDs: Unique Identifiers for Single Elements

An ID works similarly to a class, but with one critical difference: an ID should only be used once per page. Think of it as a unique identifier, like a Social Security number for an HTML element.

Adding an ID in HTML

<h1 id="page-title">Welcome to My Website</h1>

Targeting an ID in CSS

In CSS, you target an ID with a hash symbol (#):

#page-title {
  color: navy;
  text-align: center;
  font-size: 2.5em;
}

Key Rules for IDs

An ID should appear only once on a page.
IDs have higher specificity than classes. If both a class and an ID apply conflicting styles to the same element, the ID wins.
IDs are also used for anchor links (jumping to a section of a page) and JavaScript targeting.

Classes vs. IDs: When to Use Which

Here’s a simple rule of thumb:

Use a class when the style will be applied to one or more elements.
Use an ID when targeting a single, unique element.

In practice, many developers lean heavily toward classes for styling and reserve IDs for JavaScript functionality or anchor links. This approach keeps your CSS flexible and avoids specificity headaches down the road.

Common Mistakes to Avoid

Using an ID more than once on a page. Your HTML might still render, but it’s invalid and will cause problems with JavaScript and accessibility.
Forgetting the dot or hash in CSS. Writing highlight { } instead of .highlight { } will target an HTML element called <highlight>, which doesn’t exist.
Starting class or ID names with a number. Names like 1st-section are invalid. Use first-section instead.
Overusing IDs for styling. Because IDs have high specificity, they can make your CSS harder to override later. Prefer classes for styling purposes.

Quick Reference Cheat Sheet

/* Targeting an element */
p {
  color: black;
}

/* Targeting a class (use a dot) */
.intro {
  font-size: 1.2em;
}

/* Targeting an ID (use a hash) */
#main-nav {
  background-color: #333;
}

🎬 Video Demonstration

This video demonstrates how to use class and id as CSS selectors.

Exercise: Try It Yourself

Step 1. Open JSFiddle.net.

Step 2. Paste this into the HTML panel three times so you have three identical headings:

<h1>Why is the sky blue?</h1>

Step 3. Add a class to the second <h1>:

<h1 class="purple-text">Why is the sky blue?</h1>

Step 4. Add an id to the third <h1>:

<h1 id="blue-text">Why is the sky blue?</h1>

Step 5. In the CSS panel, add a rule for each:

.purple-text {
  color: purple;
}

#blue-text {
  color: blue;
}

Click Run and compare your result to the screenshot below.

JSFiddle showing how to add classes and IDs in the HTML and CSS — A live example showing classes and IDs applied in both HTML and CSS.

❓ Frequently Asked Questions

Why do developers use classes for CSS and IDs for JavaScript?

Classes are ideal for styling because they can be reused across as many elements as you need. You write the CSS rule once and apply it wherever it fits. IDs are unique per page, which makes them perfect for JavaScript: when a script needs to find and act on one specific element, an ID is the fastest and most direct way to target it. A practical rule many developers follow is to use classes for all CSS styling and save IDs for JavaScript hooks or anchor links. This keeps your stylesheet flexible and avoids specificity problems.

How should I name my classes for reusability?

Name classes based on their purpose or meaning, not their appearance. A class called .highlight or .featured can be used wherever you want to draw attention to something. A class called .yellow-background only makes sense for one specific look and becomes misleading if you ever change the color. Good class names are lowercase, use hyphens between words (like .main-heading or .product-card), and describe what the element is or does rather than what it looks like. This makes your CSS easier to maintain as a project grows.

Can I apply more than one class to the same element?

Yes. You can add as many classes as you need, separated by spaces: class="card featured on-sale". Each class can contribute different styles, and the browser applies all of them together. This lets you mix and match small, focused rules rather than writing one large rule for every possible combination.

What happens if I use the same ID twice on a page?

The page will usually still render, but it is invalid HTML. Browsers are forgiving, but JavaScript’s getElementById() only returns the first match, CSS behavior can be unpredictable, and accessibility tools may behave unexpectedly. Always treat IDs as unique — if you need the same style on multiple elements, use a class instead.

Why do I use a dot for classes and a hash for IDs in CSS?

The dot and hash tell the browser what kind of attribute to look for. Without them, the browser reads the selector as an HTML tag name. Writing highlight { } would try to target a <highlight> element, which does not exist. The dot means “find elements with this class attribute” and the hash means “find the element with this ID.” This is one of the most common beginner mistakes, so it is worth memorizing: dot for class, hash for ID.

★ Key Takeaways

Classes and IDs are what let you target specific elements with CSS instead of styling every element of the same type. This lesson explained the difference between the two and showed you how to apply them in both HTML and CSS. Next, you will learn how to center content on the page. Centering is one of the most commonly asked questions in all of web design.

Next Lesson: CSS Indentation and Comments

← Back to CSS Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.