Class and ID Selectors0%

Class and ID Selectors

Beginner9 min read•Updated: 2026-10-01

Class and ID Selectors

In the previous lesson, you saw that an Element Selector (like p { color: blue; }) styles every single paragraph on your page.

But what if you have 10 paragraphs on a page, and you want:

8 paragraphs to stay normal dark gray,
1 paragraph to have a yellow warning box, and
1 paragraph to have a green success message?

Element selectors cannot do this! This is where Class Selectors and ID Selectors become your best friends. 🚀

The Indian School Analogy: House Badges vs Aadhaar Cards 🏷️

To never get confused between a Class and an ID, remember this simple mental model:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  CLASS vs ID: THE SCHOOL ANALOGY                        |
+-------------------------------------------------------------------------+
| CLASS SELECTOR (.dot)       --> THE SCHOOL HOUSE BADGE                  |
|                                 (Red House / Shivaji House)             |
| • Many different students can wear the same Red House badge.            |
| • One student can wear multiple badges (e.g., Red House + Sports Cap).  |
| • Reusable across many elements on the page.                            |
|                                                                         |
| ID SELECTOR (#hash)         --> THE STUDENT ROLL NUMBER / AADHAAR CARD  |
|                                 (Roll No: 1042 / Aadhaar ID)            |
| • Strictly UNIQUE to one single person in the entire school.            |
| • No two elements on the same webpage should ever have the same ID.     |
+-------------------------------------------------------------------------+

1. The Class Selector (`.classname`)

A Class Selector targets one or more HTML elements that share a specific class attribute.

How to Write a Class in HTML and CSS:

1
In your HTML, add the class attribute:

1   <p class="highlight">This is an urgent announcement!</p>

1
In your CSS, prefix the class name with a period (dot . ):

 .highlight {
   background-color: #fef08a;
   color: #854d0e;
   padding: 8px 12px;
   border-radius: 6px;
 }

Important Warning

Crucial Rule: In CSS, you write a dot: .highlight. In HTML, you DO NOT write a dot: class="highlight" (never class=".highlight").

Reusability: The Superpower of Classes

You can apply the exact same class to completely different HTML tags!

1<h1 class="text-center">Annual Sports Meet</h1>
2<p class="text-center">Friday, 10th October at the Main Stadium</p>
3<button class="text-center">Download Schedule</button>

1.text-center {
2  text-align: center;
3}

All three elements will automatically be centered!

Multi-Class Styling (Mixing & Matching)

An HTML element can have multiple classes at the same time. Separate each class name with a simple space:

1<!-- One button using two classes -->
2<button class="btn btn-success">Submit Application</button>
3<button class="btn btn-danger">Cancel</button>

1/* Base styling for all buttons */
2.btn {
3  padding: 10px 20px;
4  font-size: 16px;
5  border-radius: 6px;
6  border: none;
7  cursor: pointer;
8}
9 
10/* Specific color theme classes */
11.btn-success {
12  background-color: #16a34a;
13  color: white;
14}
15 
16.btn-danger {
17  background-color: #dc2626;
18  color: white;
19}

This multi-class pattern is used by top frameworks like Bootstrap and Tailwind CSS!

2. The ID Selector (`#idname`)

An ID Selector targets one unique HTML element on the page that has a matching id attribute.

How to Write an ID in HTML and CSS:

1
In your HTML, add the id attribute:

 <header id="main-header">
   <h1>MSK Institute</h1>
 </header>

1
In your CSS, prefix the ID name with a hash symbol (#):

 #main-header {
   background-color: #1e3a8a;
   color: white;
   padding: 24px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

⚠️ Strict Rules for IDs:

1
Uniqueness: An ID name can be used only once per HTML page. Having two elements with id="submit-btn" is invalid HTML!
2
One ID per element: An element cannot have multiple IDs (unlike classes).
3
Naming rules: ID and Class names cannot start with a number (e.g. #1header is invalid; use #header-1 instead).

Class vs ID: Head-to-Head Comparison

Feature	Class Selector	ID Selector
CSS Symbol	Period / Dot (`.card`)	Hash / Pound (`#header`)
HTML Attribute	`class="card"`	`id="header"`
How many elements can have it?	Unlimited elements on the page	Only 1 unique element on the page
Can one element have multiple?	Yes (`class="btn btn-large btn-blue"`)	No (Only 1 ID per element)
Specificity (Priority)	Medium priority	High priority (Overrides classes)
Best Used For	Reusable components (cards, buttons, alerts)	Unique landmarks (header, footer, modal container)

The Specificity Showdown (Who Wins?)

What happens if an element has both an ID and a Class rule that specify conflicting text colors?

1<p id="special-note" class="warning-note">Admissions close at 5:00 PM today.</p>

1.warning-note {
2  color: orange;
3}
4 
5#special-note {
6  color: red;
7}

The Winner is: ID Selector (`color: red;`) 🏆

Because an ID is unique to a single element, the browser considers it much more specific than a class. An ID rule will always beat a class rule, no matter what order they are written in your stylesheet!

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
`<div class=".card">`	`<div class="card">`	The dot (`.`) belongs in the CSS file, never inside the HTML attribute.
Using the same `id="nav"` on 3 different menus.	Use `class="nav"` on all 3 menus.	IDs must be strictly unique per webpage.
Giving an element multiple IDs: `id="main top"`.	Use multiple classes: `class="main top"`.	HTML only allows a single value inside `id="..."`.
`.1st-box { ... }` (Starts with a number)	`.first-box` or `.box-1 { ... }`	CSS class and ID names must not start with a digit.

Quick Revision Summary

A Class Selector starts with a dot (.) in CSS and is reusable on multiple elements.
An ID Selector starts with a hash (#) in CSS and must be unique to one element on the page.
In HTML attributes, never include the dot or hash (write class="card", not class=".card").
An element can have multiple classes separated by spaces (class="badge badge-success").
In a specificity battle, ID rules override Class rules.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which symbol is used in a CSS file to select an element by its class name?

Question 2

Which of the following statements about ID selectors is completely TRUE?

Question 3

Which HTML snippet correctly assigns two different classes to a single button?

Question 4

In a CSS file, which selector matches the HTML tag <div id="profile-card">?

Question 5

If an element has class="text-blue" (setting blue text) and id="title" (setting red text), what color will the text display?

Practice Challenge (Try It Yourself)

1
Open your code editor and create school-cards.html.
2
Create 3 student profile cards with the following HTML:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Student House Badges</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 30px;
     }
12 
     /* Base card class (reused by all 3 cards) */
     .card {
       background-color: white;
       border-radius: 8px;
       padding: 16px;
       margin-bottom: 16px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
21 
     /* House color badge classes */
     .red-house {
       border-left: 6px solid #dc2626;
     }
26 
     .blue-house {
       border-left: 6px solid #2563eb;
     }
30 
     .green-house {
       border-left: 6px solid #16a34a;
     }
34 
     /* Unique Head Girl badge using ID */
     #head-girl {
       background-color: #fefce8;
       border: 2px dashed #ca8a04;
     }
   </style>
 </head>
 <body>
   <h1>Student Council 2026</h1>
44 
   <div class="card red-house" id="head-girl">
     <h3>Priya Sharma</h3>
     <p>Role: Head Girl | House: Shivaji (Red)</p>
   </div>
49 
   <div class="card blue-house">
     <h3>Aman Verma</h3>
     <p>Role: Sports Captain | House: Tagore (Blue)</p>
   </div>
54 
   <div class="card green-house">
     <h3>Neha Patel</h3>
     <p>Role: Cultural Secretary | House: Ashoka (Green)</p>
   </div>
 </body>
 </html>

1
Open the file in your browser. Notice how:

All three cards share the base .card styling.
Each card gets its house stripe using a secondary class (.red-house, .blue-house, .green-house).
Priya Sharma's card gets a golden border and warm yellow background thanks to its unique #head-girl ID! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Grouping and Combinator Selectors (CSS Syntax & Selectors Basics).

👉 Continue to Next Lesson: Grouping and Combinator Selectors →

Next Lesson

Grouping and Combinator Selectors

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Universal and Element Selectors	Grouping and Combinator Selectors

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Grouping and Combinator Selectors

Class and ID Selectors

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Class and ID Selectors

In the previous lesson, you saw that an Element Selector (like p { color: blue; }) styles every single paragraph on your page.

But what if you have 10 paragraphs on a page, and you want:

8 paragraphs to stay normal dark gray,
1 paragraph to have a yellow warning box, and
1 paragraph to have a green success message?

Element selectors cannot do this! This is where Class Selectors and ID Selectors become your best friends. 🚀

The Indian School Analogy: House Badges vs Aadhaar Cards 🏷️

To never get confused between a Class and an ID, remember this simple mental model:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  CLASS vs ID: THE SCHOOL ANALOGY                        |
+-------------------------------------------------------------------------+
| CLASS SELECTOR (.dot)       --> THE SCHOOL HOUSE BADGE                  |
|                                 (Red House / Shivaji House)             |
| • Many different students can wear the same Red House badge.            |
| • One student can wear multiple badges (e.g., Red House + Sports Cap).  |
| • Reusable across many elements on the page.                            |
|                                                                         |
| ID SELECTOR (#hash)         --> THE STUDENT ROLL NUMBER / AADHAAR CARD  |
|                                 (Roll No: 1042 / Aadhaar ID)            |
| • Strictly UNIQUE to one single person in the entire school.            |
| • No two elements on the same webpage should ever have the same ID.     |
+-------------------------------------------------------------------------+

1. The Class Selector (`.classname`)

A Class Selector targets one or more HTML elements that share a specific class attribute.

How to Write a Class in HTML and CSS:

1
In your HTML, add the class attribute:

1   <p class="highlight">This is an urgent announcement!</p>

1
In your CSS, prefix the class name with a period (dot . ):

 .highlight {
   background-color: #fef08a;
   color: #854d0e;
   padding: 8px 12px;
   border-radius: 6px;
 }

Important Warning

Crucial Rule: In CSS, you write a dot: .highlight. In HTML, you DO NOT write a dot: class="highlight" (never class=".highlight").

Reusability: The Superpower of Classes

You can apply the exact same class to completely different HTML tags!

1<h1 class="text-center">Annual Sports Meet</h1>
2<p class="text-center">Friday, 10th October at the Main Stadium</p>
3<button class="text-center">Download Schedule</button>

1.text-center {
2  text-align: center;
3}

All three elements will automatically be centered!

Multi-Class Styling (Mixing & Matching)

An HTML element can have multiple classes at the same time. Separate each class name with a simple space:

1<!-- One button using two classes -->
2<button class="btn btn-success">Submit Application</button>
3<button class="btn btn-danger">Cancel</button>

1/* Base styling for all buttons */
2.btn {
3  padding: 10px 20px;
4  font-size: 16px;
5  border-radius: 6px;
6  border: none;
7  cursor: pointer;
8}
9 
10/* Specific color theme classes */
11.btn-success {
12  background-color: #16a34a;
13  color: white;
14}
15 
16.btn-danger {
17  background-color: #dc2626;
18  color: white;
19}

This multi-class pattern is used by top frameworks like Bootstrap and Tailwind CSS!

2. The ID Selector (`#idname`)

An ID Selector targets one unique HTML element on the page that has a matching id attribute.

How to Write an ID in HTML and CSS:

1
In your HTML, add the id attribute:

 <header id="main-header">
   <h1>MSK Institute</h1>
 </header>

1
In your CSS, prefix the ID name with a hash symbol (#):

 #main-header {
   background-color: #1e3a8a;
   color: white;
   padding: 24px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

⚠️ Strict Rules for IDs:

1
Uniqueness: An ID name can be used only once per HTML page. Having two elements with id="submit-btn" is invalid HTML!
2
One ID per element: An element cannot have multiple IDs (unlike classes).
3
Naming rules: ID and Class names cannot start with a number (e.g. #1header is invalid; use #header-1 instead).

Class vs ID: Head-to-Head Comparison

Feature	Class Selector	ID Selector
CSS Symbol	Period / Dot (`.card`)	Hash / Pound (`#header`)
HTML Attribute	`class="card"`	`id="header"`
How many elements can have it?	Unlimited elements on the page	Only 1 unique element on the page
Can one element have multiple?	Yes (`class="btn btn-large btn-blue"`)	No (Only 1 ID per element)
Specificity (Priority)	Medium priority	High priority (Overrides classes)
Best Used For	Reusable components (cards, buttons, alerts)	Unique landmarks (header, footer, modal container)

The Specificity Showdown (Who Wins?)

What happens if an element has both an ID and a Class rule that specify conflicting text colors?

1<p id="special-note" class="warning-note">Admissions close at 5:00 PM today.</p>

1.warning-note {
2  color: orange;
3}
4 
5#special-note {
6  color: red;
7}

The Winner is: ID Selector (`color: red;`) 🏆

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
`<div class=".card">`	`<div class="card">`	The dot (`.`) belongs in the CSS file, never inside the HTML attribute.
Using the same `id="nav"` on 3 different menus.	Use `class="nav"` on all 3 menus.	IDs must be strictly unique per webpage.
Giving an element multiple IDs: `id="main top"`.	Use multiple classes: `class="main top"`.	HTML only allows a single value inside `id="..."`.
`.1st-box { ... }` (Starts with a number)	`.first-box` or `.box-1 { ... }`	CSS class and ID names must not start with a digit.

Quick Revision Summary

A Class Selector starts with a dot (.) in CSS and is reusable on multiple elements.
An ID Selector starts with a hash (#) in CSS and must be unique to one element on the page.
In HTML attributes, never include the dot or hash (write class="card", not class=".card").
An element can have multiple classes separated by spaces (class="badge badge-success").
In a specificity battle, ID rules override Class rules.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which symbol is used in a CSS file to select an element by its class name?

Question 2

Which of the following statements about ID selectors is completely TRUE?

Question 3

Which HTML snippet correctly assigns two different classes to a single button?

Question 4

In a CSS file, which selector matches the HTML tag <div id="profile-card">?

Question 5

If an element has class="text-blue" (setting blue text) and id="title" (setting red text), what color will the text display?

Practice Challenge (Try It Yourself)

1
Open your code editor and create school-cards.html.
2
Create 3 student profile cards with the following HTML:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Student House Badges</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 30px;
     }
12 
     /* Base card class (reused by all 3 cards) */
     .card {
       background-color: white;
       border-radius: 8px;
       padding: 16px;
       margin-bottom: 16px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
21 
     /* House color badge classes */
     .red-house {
       border-left: 6px solid #dc2626;
     }
26 
     .blue-house {
       border-left: 6px solid #2563eb;
     }
30 
     .green-house {
       border-left: 6px solid #16a34a;
     }
34 
     /* Unique Head Girl badge using ID */
     #head-girl {
       background-color: #fefce8;
       border: 2px dashed #ca8a04;
     }
   </style>
 </head>
 <body>
   <h1>Student Council 2026</h1>
44 
   <div class="card red-house" id="head-girl">
     <h3>Priya Sharma</h3>
     <p>Role: Head Girl | House: Shivaji (Red)</p>
   </div>
49 
   <div class="card blue-house">
     <h3>Aman Verma</h3>
     <p>Role: Sports Captain | House: Tagore (Blue)</p>
   </div>
54 
   <div class="card green-house">
     <h3>Neha Patel</h3>
     <p>Role: Cultural Secretary | House: Ashoka (Green)</p>
   </div>
 </body>
 </html>

1
Open the file in your browser. Notice how:

All three cards share the base .card styling.
Each card gets its house stripe using a secondary class (.red-house, .blue-house, .green-house).
Priya Sharma's card gets a golden border and warm yellow background thanks to its unique #head-girl ID! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Grouping and Combinator Selectors (CSS Syntax & Selectors Basics).

👉 Continue to Next Lesson: Grouping and Combinator Selectors →

Next Lesson

Grouping and Combinator Selectors

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Universal and Element Selectors	Grouping and Combinator Selectors

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Class and ID Selectors

The Indian School Analogy: House Badges vs Aadhaar Cards 🏷️

1. The Class Selector (.classname)

How to Write a Class in HTML and CSS:

Reusability: The Superpower of Classes

Multi-Class Styling (Mixing & Matching)

2. The ID Selector (#idname)

How to Write an ID in HTML and CSS:

⚠️ Strict Rules for IDs:

Class vs ID: Head-to-Head Comparison

The Specificity Showdown (Who Wins?)

The Winner is: ID Selector (color: red;) 🏆

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Grouping and Combinator Selectors

Related Lessons

Practice Quiz

Loading Page Content...

Class and ID Selectors

The Indian School Analogy: House Badges vs Aadhaar Cards 🏷️

1. The Class Selector (.classname)

How to Write a Class in HTML and CSS:

Reusability: The Superpower of Classes

Multi-Class Styling (Mixing & Matching)

2. The ID Selector (#idname)

How to Write an ID in HTML and CSS:

⚠️ Strict Rules for IDs:

Class vs ID: Head-to-Head Comparison

The Specificity Showdown (Who Wins?)

The Winner is: ID Selector (color: red;) 🏆

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Grouping and Combinator Selectors

Related Lessons

Practice Quiz

1. The Class Selector (`.classname`)

2. The ID Selector (`#idname`)

The Winner is: ID Selector (`color: red;`) 🏆

1. The Class Selector (`.classname`)

2. The ID Selector (`#idname`)

The Winner is: ID Selector (`color: red;`) 🏆