?️ Class and ID in HTML

⚡ Quick Overview

When you build websites, you often need to select and style specific parts of your page. HTML provides two important attributes for this: class and id. These help you label elements so you can apply styles using CSS or add behavior with JavaScript. Understanding when and how to use classes and IDs makes your pages easier to manage and more powerful.

? Key Concepts

? Class

A class is a reusable label you can give to many elements.
Groups elements that share the same styles or behaviors.
You can apply the same CSS styles to all elements with the same class.
Add a class in HTML using class="name".
In CSS, select a class with a dot: .name { ... }.
An element can have multiple classes separated by spaces.

? ID

An id is a unique identifier for a single element on a page.
Each id must be used only once per page.
Useful when you want to style or manipulate one specific element.
Add an id in HTML using id="unique-name".
In CSS, select an id with a hash: #unique-name { ... }.
IDs have higher priority than classes when CSS rules conflict.

? Syntax & Theory

Basic syntax for adding a class and an id to HTML elements:

? View Syntax

<!-- Element with a class -->
<p class="highlight">This uses a class.</p>

<!-- Element with an id -->
<h1 id="main-title">This uses an id.</h1>

<!-- Element with both class and id -->
<button id="primary-btn" class="btn primary">Click me</button>

CSS selectors for classes and IDs:

? View CSS Selectors

/* Class selector */
.highlight {
  color: #0b3d91;
}

/* ID selector */
#main-title {
  font-size: 2rem;
}

/* Element with both class and id */
#primary-btn.primary {
  padding: 10px 18px;
  border-radius: 6px;
}

? Code Example: Using Class and ID

? View Code Example

<!-- Block with a unique ID -->
<div id="main-header" style="background-color: #0b3d91; color: white;
padding: 15px; text-align: center;">
  Welcome to My Website
</div>

<!-- Multiple elements share the same class -->
<p class="highlight" style="color: #0b3d91;">This paragraph is highlighted using a class.</p>
<p class="highlight" style="color: #0b3d91;">This is another highlighted paragraph.</p>

? Live Output / Explanation

?️ Rendered Result

Below is how the browser would display the HTML above. The #main-header is styled as a unique banner, and both paragraphs share the same .highlight look.

Welcome to My Website

This paragraph is highlighted using a class.

This is another highlighted paragraph.

? Tips & Best Practices

Use class when you want to style or manipulate multiple elements similarly.
Use id for unique elements that appear only once per page (logo, main header, footer, etc.).
Do not use the same id on more than one element — this can cause unexpected CSS and JS behavior.
Classes can be reused and combined (an element can have multiple classes).
IDs have higher specificity than classes in CSS, so #id rules can override .class rules.
Choose meaningful names like main-header or primary-button instead of div1 or box.
Prefer CSS files with class-based styles instead of repeating inline styles in HTML.

? Try It Yourself

Create a <div> with id="header" and style it with a background color using CSS.
Make three paragraphs and assign them the same class highlight; style them with CSS to have a special color and font style.
Give one paragraph both a class and an id. Define conflicting styles in CSS and observe which style takes priority (id vs class).
Design a simple page where navigation links use the same class (for shared styling), but the current page link also has an id for special highlighting.

? Summary

Classes are reusable labels you can apply to many elements for shared styling or behavior.
IDs uniquely identify a single element on the page and have higher CSS specificity.
Use classes for groups of similar elements and ids for unique, important elements.
Combining clear class and id names keeps your HTML, CSS, and JavaScript organized and easy to maintain.