HTML Class Attribute: कई Elements को एक स्टाइल
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
class attribute element को एक नाम देता है जिसका इस्तेमाल CSS और JavaScript कर सकते हैं। id से अलग, जो unique होना चाहिए, class कई elements साझा कर सकते हैं — और एक element में एक साथ कई classes हो सकती हैं।
Classes क्यों हैं
कल्पना करें कि पेज पर बीस course cards हैं जो सब एक जैसे दिखने चाहिए। Classes के बिना आपको हर एक को अलग से style करना पड़ता। Class के साथ आप style एक बार लिखते हैं — .card { border: 1px solid #ccc; padding: 16px; } — और हर card को class="card" देते हैं। CSS एक बार बदलें और बीसों cards एक साथ बदल जाते हैं।
कई classes
एक element में कई classes हो सकती हैं, space से अलग करके: <div class="card featured large">। CSS में .card सभी cards को style करता है, .featured खास रूप जोड़ता है, और .card.featured (बिना space) सिर्फ उन cards को चुनता है जो featured भी हैं। असली वेबसाइटें इसी तरह छोटे reusable टुकड़ों से लचीले design बनाती हैं।
Class का नामकरण
अच्छे class नाम बताते हैं कि चीज़ क्या है, न कि वह कैसी दिखती है: class="course-card", class="orange-box" से बेहतर है। अगर design बाद में बदलता है और box नीला हो जाता है, तो "orange-box" नाम झूठ बन जाता है, जबकि "course-card" सच रहता है।
Class क्या है
Class एक नाम है जो आप elements को देते हैं ताकि उन्हें एक group के रूप में treat कर सकें। एक ही class को आप जितने चाहें उतने elements पर इस्तेमाल कर सकते हैं — दस buttons, पचास cards, सब class="btn" के साथ। CSS में आप class को सामने dot लगाकर लिखते हैं, जैसे .btn, और एक rule उस नाम वाले हर element को style करता है।
याद रखने की तरकीब: class = समूह का नाम — CSS में dot (.) से शुरू, और एक element में कई classes space से अलग।
सिंटैक्स
<p class="note">First note.</p>
<p class="note">Second note.</p>
<p class="note important">Third note — two classes.</p>
<style>
.note { color: grey; }
.important { font-weight: bold; }
</style>
एक element में एक से ज़्यादा class हो सकती हैं — बस नामों को space से अलग करें। ऊपर वाला तीसरा paragraph .note से grey रंग और .important से bold text, दोनों पाता है।
class="Note" और class="note" दो अलग classes हैं, और CSS उन्हें अलग मानेगा। एक style चुनें — छोटे अक्षर — और हर जगह वही इस्तेमाल करें।class="warning" अच्छा है; class="red-text" बुरा है — क्योंकि जिस दिन आप रंग बदलकर orange कर देंगे, नाम झूठ बन जाएगा।आम गलतियाँ
- Class नाम number से शुरू करना, जैसे
class="1st"— class नाम अक्षर (या hyphen या underscore) से शुरू होना चाहिए। - एक class नाम के अंदर space डालना, जैसे
class="my note"— यह दो classes हैं,myऔरnote, एक नहीं। - HTML में class लिखना लेकिन CSS में dot भूल जाना —
note { }एक<note>tag को style करता है, जो है ही नहीं। - वहाँ class इस्तेमाल करना जहाँ id होना चाहिए — class groups के लिए है, id एक ही element के लिए है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Classes</title>
<style>
.card { border: 1px solid #ccc; padding: 12px; }
.featured { background: #fff3e0; }
</style>
</head>
<body>
<div class="card">Normal card</div>
<div class="card featured">Featured card</div>
<div class="card">Another normal card</div>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. HTML में class क्या होती है?
यह एलिमेंट को दिया गया नाम है जिससे CSS और JavaScript उन्हें एक समूह की तरह संभाल सकें; एक ही class कई एलिमेंट पर लग सकती है।
2. क्या एक एलिमेंट पर कई class लग सकती हैं?
हाँ, नामों को स्पेस से अलग करके लिखें; एलिमेंट को अपनी सभी class की स्टाइल मिल जाती है।
3. class का नाम कैसा रखना चाहिए?
नाम उस चीज़ के हिसाब से रखें, न कि उसके दिखने के हिसाब से, ताकि डिज़ाइन बदलने पर भी नाम सही रहे।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
