HTML Classes

जब हम किसी वेबसाइट या वेबपेज को बनाते हैं, तो बहुत बार ऐसा होता है कि हमें एक जैसे कई elements को एक जैसी style देनी होती है। ऐसे में हर element को बार-बार style देना मुश्किल हो जाता है… यहीं काम आता है — HTML Class Attribute

HTML Class क्या होती है?

HTML में class attribute का उपयोग किसी element को एक group में बाँधने के लिए किया जाता है। आप किसी भी element को class दे सकते हैं ताकि आप उस class पर एक common CSS style लगा सकें। मतलब: Class = “Group Name” जिसे CSS या JavaScript दोनों से target किया जा सकता है।

Basic Syntax:

<tag class="classname">Content</tag>
<p class="highlight">This is a highlighted paragraph.</p>

यहाँ P tag में एक क्लास है highlight class name है।

एक Class को CSS से Style कैसे करते हैं

CSS में class को target करने के लिए dot (.) का उपयोग किया जाता है।

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

HTML:

<p class="highlight">यह एक highlighted paragraph है।</p>
<p>यह normal paragraph है।</p>

Output: पहला paragraph yellow background के साथ दिखेगा।

एक ही Class को कई Elements में Use कर सकते हैं

Class का सबसे बड़ा फायदा यही है कि आप उसे multiple elements में reuse कर सकते हैं।

Example:

<h2 class="blue-text">Welcome</h2>
<p class="blue-text">This paragraph is also blue.</p>
<div class="blue-text">This div text is blue too!</div>
<!-- CSS -->
.blue-text {
  color: blue;
  font-family: Arial;
}

Output: सभी elements में blue color होगा क्योंकि सभी की class एक जैसी है।

एक Element में Multiple Classes भी दे सकते हैं

कई बार हमें एक element पर दो या उससे ज्यादा styles apply करनी होती हैं। ऐसे में हम space से अलग-अलग class names दे सकते हैं।

<p class="highlight large-text">Hello World</p>

<!-- CSS -->
<style>
.highlight { background: yellow; }
.large-text { font-size: 24px; }
</style>

Output: Text बड़ा भी होगा और highlighted भी।

Example: Classes के साथ Color Boxes

<style>
.box {
  padding: 20px;
  margin: 10px;
  color: white;
  text-align: center;
  font-weight: bold;
}
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
</style>

<div class="box red">Red Box</div>
<div class="box green">Green Box</div>
<div class="box blue">Blue Box</div>

Output: तीन colorful boxes — सभी का structure समान, पर color अलग।

Class vs ID में फर्क

Feature	Class	ID
Symbol in CSS	. (dot)	# (hash)
Use (उपयोग)	कई elements में एक जैसी style	केवल एक element के लिए
Example (उदाहरण)	.btn { color:red; }	#header { background:blue; }
Reusability (पुनःउपयोगिता)	✅ बार-बार use हो सकती है	❌ एक बार ही use होनी चाहिए
Priority (प्राथमिकता)	Medium	High

Example:

<div class="menu">This is class</div>
<div id="menu">This is id</div>
<!-- Css -->
<style>
.menu { background: orange; }
#menu { background: blue; }
</style>

Output: दोनों अलग-अलग color में दिखेंगे।

JavaScript में Class को Access करना

JavaScript में आप document.getElementsByClassName() या classList का उपयोग करके किसी class को access कर सकते हैं। Example:

<p class="msg">Hello</p>
<p class="msg">Hi</p>

<script>
let messages = document.getElementsByClassName("msg");
for(let i = 0; i < messages.length; i++) {
  messages[i].style.color = "green";
}
</script>

Output: दोनों paragraph green color में दिखेंगे।

Real-life Example — Button Design

<style>
.btn {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover {
  background: #0056b3;
}
</style>

<button class="btn">Click Me</button>
<button class="btn">Learn More</button>

Output: दोनों button एक जैसी style में होंगे — hover करने पर color dark हो जाएगा।

एक Class के अंदर दूसरी Class Nest करना

<style>
.card {
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 15px;
  width: 250px;
}
.card .title {
  font-weight: bold;
  font-size: 18px;
}
.card .desc {
  color: #555;
}
</style>

<div class="card">
  <div class="title">Product Name</div>
  <div class="desc">This is a short product description.</div>
</div>

Output: Beautiful styled card layout बनेगा।

Practice Exercise

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML Classes Practice</title>
  <style>
    .section { padding: 15px; margin: 10px; border-radius: 5px; }
    .header { background: lightblue; }
    .content { background: lightgreen; }
    .footer { background: lightcoral; }
  </style>
</head>
<body>

<div class="section header">Header Section</div>
<div class="section content">Main Content</div>
<div class="section footer">Footer Section</div>

</body>
</html>

Output: तीन अलग-अलग section, एक जैसे structure के साथ — बिल्कुल professional look!

Summary

class attribute elements को एक group में रखता है।
एक class को कई elements में use किया जा सकता है।
एक element में multiple classes भी लगाई जा सकती हैं।
CSS में class को . से target करते हैं।
Class, ID से अलग है — Class reusable होती है।
JavaScript से class को dynamically control किया जा सकता है।