Class and ID in CSS — How to Target Specific Elements Precisely

In the previous lesson you learned the Element Selector, which targets all elements of the same type. But in real projects, you often need to style a specific element or a specific group, not every paragraph or every heading on the page.

That is where class and id come in — two of the most important selectors in CSS. Understanding the difference early will save you many mistakes later.

If you are searching for Class vs ID in CSS or when to use class vs id in CSS or CSS selectors for beginners, this lesson is for you.

What Are Class and ID in CSS?

Both are attributes you add in HTML, then target in CSS:

• Class: group multiple elements under the same styling.
• ID: identify one unique element on the page.

Simple definition: Use class when you want reusable styling, and use id when the element is unique and does not repeat.

How to Write Class and ID Correctly in HTML and CSS

1. Class

In HTML:

<p class="highlight">Highlighted text</p>

What does this code do? It adds a class named highlight to one paragraph.

Expected result: no visual change until you define a CSS rule for that class.

Common mistake: using a different class name in CSS than in HTML.

In CSS, write the class name with a dot .:

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

What does this code do? Styles every element with class highlight.

Line by line:

• .highlight: targets elements by class.
• background-color: adds a light yellow background.
• font-weight: bold;: makes text bold.

Expected result: you can reuse the same style on multiple elements.

Common mistake: forgetting the dot before the class name.

2. ID

In HTML:

<h1 id="main-title">Welcome</h1>

What does this code do? It defines a unique identity for the heading named main-title.

Expected result: that id should appear only once on the page.

Common mistake: repeating the same id on multiple elements.

In CSS, write the id name with a hash #:

#main-title {
    color: #1d4ed8;
    text-decoration: underline;
}

What does this code do? It styles only the element with id="main-title".

Line by line:

• #main-title: targets one unique element.
• color: changes the text color.
• text-decoration: adds an underline.

Expected result: no other element on the page is affected.

Common mistake: using .main-title instead of #main-title.

Full Practical Example

HTML:

<h1 id="main-title">My learning site</h1>

<p class="highlight">This is an important paragraph.</p>
<p>This is a normal paragraph.</p>
<button class="highlight">Featured button</button>

CSS:

#main-title {
    color: #1e3a8a;
    margin-bottom: 16px;
}

.highlight {
    background-color: #fde68a;
    padding: 6px 10px;
    border-radius: 6px;
}

What does this code do? It combines a unique element style via ID and a reusable style via class.

Line by line:

• Rule #main-title: only for the main heading.
• Rule .highlight: for every element with that class.

Expected result: higher flexibility: customize one element and reuse a shared style.

Common mistake: relying on IDs for everything instead of using classes.

Result: the only heading with id="main-title" gets its own style, while every element with class="highlight" gets the shared styling.

Class vs ID in CSS — Clear Comparison

When to Use Class vs ID in CSS

Use Class when:

• You want the same style on multiple elements.
• You need reusable styling for components.
• You build repeated components like buttons, cards, and alerts.

Use ID when:

• The element is truly unique on the page.
• You want to create an internal anchor link like #contact.
• You need to target one element in JavaScript.

Common Mistakes When Using Class and ID in CSS

1) Repeating the same ID on multiple elements:

<!-- Wrong -->
<h2 id="title">Title 1</h2>
<h2 id="title">Title 2</h2>

What does this do? It repeats the same id twice, which is invalid.

Expected result: CSS and JavaScript may behave unpredictably.

Common mistake: treating id like a class in terms of reuse.

This violates the rule because an id must be unique.

2) Mixing up dot and hash:

#btn-primary { ... }  /* targets an id */
.btn-primary { ... }  /* targets a class */

What does this show? It highlights the difference between # and ..

Expected result: each line targets a different type of selector.

Common mistake: copying a rule with the wrong symbol and breaking the style.

Changing a single symbol completely changes the target.

3) Choosing unclear names:

Avoid names like red-text if the true purpose is "error message". Prefer meaningful names like error-message — they are easier to maintain.

Frequently Asked Questions — FAQ

Can I put more than one class on the same element?

Yes, and it is very common:

<button class="btn btn-primary large">Submit</button>

What does this code do? It adds three classes to the same element to combine styles.

Expected result: the button gets shared styles plus size-specific styles at the same time.

Common mistake: separating class names with commas instead of spaces.

Can I put more than one id on the same element?

No, each element can only have one id.

Is class weaker than id in CSS priority?

Yes, in terms of specificity, id is stronger than class. But that does not mean it is always better; what matters is choosing the right tool for clean code.

Can I combine element and class or id selectors in CSS?

Yes, for example:

p.highlight {
    color: #b45309;
}

What does this code do? It targets only p elements that have class highlight.

Line by line:

• p.highlight: element + class combined for more precision.
• color: applies color only in that scope.

Expected result: elements like div.highlight are not affected.

Common mistake: expecting any .highlight to be affected even if it is not a p.

This targets only p paragraphs with class highlight.