class | क्लास | CSS in Hindi

CSS class के बारे में जान ने से पहले आपको CSS tutorials का बेसिक पता होना चाइये । इस tutorials में हम CSS क्लास के बारे में सीखेंगे और उदाहरण से समझेंगे भी । CSS क्लास में CSS के attributes और properties को डिफाइन किया जाता हैं । CSS class को हम ब्लॉक भी कह सकते हैं इसमे CSS के ऐट्रिब्यूट्स और प्रॉपर्टीज को लिखा जाता हैं ।
CSS क्लास कोड के ब्लॉक का एक नाम होता हैं । CSS class के बिना आप CSS को HTML में उपयोग नहीं कर सकते हैं ।
साधारण Hindi भाषा में
कोड के प्रत्येक ब्लॉक में एक अलग सीएसएस class नाम होता है। प्रत्येक CSS class का नाम अलग अलग होता हैं सभी CSS क्लास के नाम सामान नहीं हो सकते क्युकी प्रत्येक CSS क्लास ब्लॉक को अलग अलग उद्देश्य को पूरा करने के लिए बनायीं जाती हैं ।

CSS क्लास, CSS ब्लॉक की एक विशिष्ट पहचान नाम होता हैं ।
साधारण हिंदी भाषा में समझे तो जैसी एक स्कूल में बहुत सारी क्लास होती हैं अब उन क्लास को अलग अलग नाम से पहचाना जाता हैं जैसे 9th class , 10th class , 11th क्लास आदि ।
ऐसे ही क्लस्स में भी कितनी भी क्लास बना सकते हैं सभी class को अलग अलग नाम देते हैं ताकि HTML को पता चले की कोनसी क्लास किसलिए उपयोग की गयी हैं ।

ये सब आपको उदाहरण से समझ आजायेगा ।
। यदि आप class का उपयोग नहीं करना चाहते हैं तो आप CSS id का उपयोग कर सकते हैं। CSS id class के समान है लेकिन Id और Class में एक छोटा सा अंतर है।
Developers वेबसाइट डिजाइन के अनुसार सीएसएस classes बनाते हैं।
चलिए CSS के सिंटेक्स से समझते हैं जिस से आपको CSS क्लास के बारे में समझ आजायेगा

सीएसएस class syntax


.class-name{

}

CSS क्लास को बनाते समय CSS क्लास का नाम डॉट (.) के साथ लिखा जाता हैं ।
CSS class का नाम कुछ भी बना सकते हैं उस class को को HTML में डिफाइन करना पड़ता हैं जिस से HTML कस का इफ़ेक्ट देखने को मिलता हैं । जैसे - यदि आप header पर काम कर रहे हैं तो आप सीएसएस क्लास का नाम .header के रूप में ले सकते हैं। इसी तरह से आप कोई भी CSS class नाम टास्क के अनुसार बना सकते हैं ।

CSS क्लास को कैसे बनाते हैं ?

CSS क्लास को बनान बहुत ही आसान होता हैं ।
अपनी जरूरत के हिसाब से क्लास को बनाया जा सकता हैं । निम्नलिखित उदाहरण आपको दिखाएंगे, कि सीएसएस attributes और properties का उपयोग करके सीएसएस क्लास कैसे को कैसे बनाते हैं ।


.header{
height:200px; 
width:800px; 
background-color:grey; 
color:white ; 

}

ऊपर दिए गए उदाहरण में एक क्लास ,header बनाई गयी हैं । क्लास का नाम कुछ भी ले सकते हैं । क्लास नाम के साथ डॉट(.) भी लगाई गयी हैं । क्लास नाम के बाद कर्ली ब्रेसेस { } को लिखा जाता हैं जो CSS के ब्लॉक को दर्शाते हैं। इन कर्ली ब्रेसेस के अंदर ही CSS ऐट्रिब्यूट्स और प्रॉपर्टीज को डिफाइन करना पड़ता हैं । इस CSS class ब्लॉक में हमने height, width, background-color और color को डिफाइन किया हुआ हैं ।

CSS class in HTML

CSS क्लास बनाने के बाद उस CSS क्लास को HTML में डिफाइन करना पड़ता हैं । कस class को हटम्ल में use करने के लिए हटम्ल <div> एलिमेंट का उपयोग किया जाता हैं ।
चलिए एक example से समझते हैं जिसमे हम एक HTML कोड में CSS को बना कर उसकी class को उपयोग करेंगे ।

CSS class in HTML

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS in HTML   </title>

</head>


A simple CSS class effects 
CSS header |CSS header |CSS header |CSS header 

</body>
</html>

Run

ऊपर दिए गए उदाहरण में CSS को HTML <head> </head> टैग के अंदर बने हैं इस CSS को हम inline CSS के नाम से भी जानते हैं । CSS बनाने के बाद उसे को HTML div टैग में class के नाम को डिफाइन किया हुआ हैं जिसे से उसे div पर CSS का इफ़ेक्ट देखने को मिल जाता हैं ।

एक से अधिक कस classes को HTML में उपयोग करना -

एक वेबसाइट में एक से अधिक सीएसएस क्लास हो सकती हैं। कई CSS में अलग-अलग प्रॉपर्टीज होती हैं । CSS क्लास को को अलग अलग HTML module के लिए बनाया जाता हैं जिस से उस module को या कह सकते हैं ब्लॉक को आसानी से डिज़ाइन किया जा सके ।

Multiple classes in HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS Multiple classes in HTML  </title>

</head>


A simple CSS class effects 
CSS header |CSS header |CSS header |CSS header 


 
Some text here 
 
</body>
</html>

Run

ऊपर दिए गए उदाहरण में कई CSS बनाई गयी हैं ।
Internal CSS को <style></style> टैग के अंदर बनाया जाता हैं । यहाँ पर पहली CSS class का नाम header हैं और दूसरी CSS क्लास का नाम footer हैं । एक CSS वेब पेज के हैडर को डिज़ाइन करने के लिए बनाई गयी तो दूसरी कस फुटर को डिज़ाइन करने के लिए बनाई गयी हैं ।
इसके बाद इन दोनों CSS क्लास को हटम्ल में डिव एलिमेंट की मदत से यूज किया हैं ।
इस तरह से CSS क्लास को बना कर हटम्ल में उपयोग की जाती हैं ।

Please Share