Basic Definitions, Plenty of Examples, Practical Tips, and a Pinch of Coding Madness
Hello code lover 💻✨
At some point while writing HTML, everyone runs into the same crisis:
“Why did this affect everything?”
“But I only wanted to target this!”
“Is CSS broken… or is it me?” 😵💫
The answers to these existential questions are usually hidden in two places:
👉 class
👉 id
In this article, we won’t just explain what they are.
We’ll get to know them, learn where to use them, where never to use them, and which one saves your life in which situation.
If you’re ready, let’s go 🚀
🧩 What Is Class? (The Hero of the Crowd)
Class is used to group multiple HTML elements under the same properties.
🧠 Real-life analogy:
Class = A team wearing the same jersey
Same team, different positions ⚽
📌 Defining a Class in HTML
“`html
This is a description paragraph
This one shares the same style
🎨 Using Class in CSS
css
.aciklama {
color: #444;
font-size: 16px;
line-height: 1.6;
}
✨ Effect:
All elements with the .aciklama class are affected
No need to style things one by one
Your code stays clean
💡 Tip: An Element Can Have Multiple Classes
Yes yes… no split personality here 😄
html
Buy Now
css
.btn { padding: 10px; }
.btn-primary { background: blue; color: white; }
.buyuk { font-size: 20px; }
🎯 Result: Like LEGO… combine the pieces and build whatever you want.
👑 What Is ID? (Unique, Special, and a Drama Queen)
ID is an identifier that must appear only once in an HTML page.
🧠 Analogy time:
ID = National ID number
If someone else has it… the system breaks 😬
📌 Using ID in HTML
html
We Are Learning HTML
🎨 Selecting an ID in CSS
css
anaBaslik {
color: crimson;
text-align: center;
}
⚡ ID Is Gold in JavaScript
html
Click Me
js
document.getElementById(“tikla”).addEventListener(“click”, () => {
alert(“I was clicked! 😎”);
});
🎯 Fast, clear, single target.
🚨 Legendary Mistakes with ID
❌ Using the Same ID More Than Once
html
Kodu kopyala
Browser: 🤐
JavaScript: 🤬
👉 Correct version:
html
🆚 Class vs ID – In-Depth Comparison
Feature Class ID
Reusable? ✅ ❌
Multiple per element ✅ ❌
CSS priority Medium High
JavaScript friendliness Good Excellent
Purpose Grouping Single target
🧠 Golden sentence:
“Use class for styling, id for control”
🧠 CSS Specificity (Why Did My Style Get Overridden?)
css
p { color: black; }
.aciklama { color: blue; }
ozel { color: red; }
html
Hello
🎯 Winner: ID (red)
Specificity order:
1️⃣ Inline styles
2️⃣ ID
3️⃣ Class
4️⃣ Element
That’s why throwing IDs everywhere is dangerous ⚠️
🛠️ Real-Life Scenario
html
css
mainNav {
background: #222;
}
.menu-item {
color: white;
margin-right: 15px;
}
📌 Navigation is single → ID
📌 Menu items are many → Class
🧁 Mini Cheat Sheet
🔁 Repeated elements → class
🎯 Single element → id
🎨 Styling → class
⚙️ JS targeting → id
🧼 Clean code → Fewer IDs, more logic
🎉 Final Words
When Class and ID are used correctly:
CSS becomes cleaner ✨
JavaScript is happier 😄
You stop crying over “why doesn’t this work?” 💖
Coding is an art…
But once you know the basics, it stops being modern art 😌
