CSS in Hindi | Tutorials
CSS एक डिजाइनिंग लैंग्वेज हैं जिसके द्वारा वेब पेज को डिज़ाइन किया जाता हैं । CSS की फूल फॉर्म cascading stylesheet होती हैं ।
CSS को एक stylesheet भाषा के नाम से भी जाना जाता हैं । CSS का उपयोग HTML से बने वेब पेज को डिज़ाइन करने में किया जाता हैं ।
साधारण Hindi भाषा में समझे तो जब कोई डेवलपर एक HTML वेब पेज बनाता हैं तो वह वेब पेज दिखने में अच्छा नहीं लगता हैं । वेब पेज को डिज़ाइन करने के लिए CSS का उपयोग करना पड़ता हैं । CSS के द्वारा डॉक्यूमेंट(document) पेज को अलग अलग डिज़ाइन में प्रेजेंट(present) किया जाता हैं ।
CSS वेब पेज के कंटेंट और layout को अलग तरग से डिज़ाइन करने के लिए CSS में font , color, shadow आदि दिया जाता हैं जिस से पेज की डिजाइनिंग हो जाती हैं और पेज दिखने मैं बहुत अच्छा लगता हैं ।
CSS को अपने अनुसार किसी भी तरह से customize किया जा सकता हैं । सिंपल HTML में लिखे गए कंटेंट(content) को देखने से उसमे वो बात नहीं होती हैं परन्तु जब CSS को उस कंटेंट पर लगाया जाता हैं तो वह कंटेंट बहुत अच्छा दिखाई देने लगता हैं । CSS का एक सबसे बड़ा फायदा यह हैं की वेब के सभी pages के लिए केवल एक CSS फाइल को बनाकर ही use किया जा सकता हैं इसमें बार बार हर एक पेज के लिए और हटम्ल टैग के लिए CSS बनाने की कोई भी जरुरत नहीं पड़ती हैं ।
CSS से डिज़ाइन किये गए वेब पेज को किसी भी डिवाइस स्क्रीन के द्वारा एक्सेस किया जा सकता हैं। CSS से वेबसाइट को डिज़ाइन करके छोटी से बड़ी डिवाइस स्क्रीन में पेज को ओपन किया जा सकता हैं ।
CSS का विकास कब हुआ?
>CSS विनिर्देशन वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा बनाए रखा जाता है। CSS को December 17, 1996 में वेब की दुनिया में लाया था । CSS को
Håkon Wium LieBert BosWorld Wide Web कंसोर्टियम के द्वारा विकसित किया था । यह वो दौर था जब W3C को बहुत बड़ी कामयाबी मिली थी । HTML के अलावा, अन्य मार्कअप भाषाएं XHTML, XML, SVG और XUL सहित CSS को सपोर्ट करती हैं ।
CSS को लिखने का सिंटेक्स -
CSS को लिखने के लिए बहुत सिंपल सिंटेक्स का उपयोग किया जाता हैं । CSS में बहुत सारे इंग्लिश words का उपयोग किया जाता हैं जो की CSS की प्रॉपर्टीज को दर्शाते हैं । इन इंग्लिश वर्ड को हम कस इंग्लिश कीवर्ड्स भी कह सकते हैं ।
एक स्टाइल शीट में नियमों की एक सूची होती है। प्रत्येक नियम या नियम-सेट में एक या अधिक selector, और एक declaration ब्लॉक होता है।
CSS में बहुत शारी प्रॉपर्टीज होती हैं ।
CSS को लिखने के 2 सिंटेक्स(syntax) से समझेंगे -
सीएसएस क्लास ( CSS class) -
CSS एक CSS ब्लॉक का एक नाम होता हैं । प्रत्येक ब्लॉक के लिए अलग अलग नाम को डिफाइन किया जाता हैं । CSS क्लास के द्वारा HTML में CSS को apply किया जाता हैं । CSS क्लास को बनाने के लिए क्लास नाम से पहले डॉट (.) लगायी जाती हैं ।
Syntax -
.header{
}
इस सिंटेक्स में क्लास नाम हैडर(header) हैं जिसे डॉट (.header) के साथ लिखा गया हैं । CSS में क्लास नाम के बाद curly braces आते हैं ।
सीएसएस id( CSS id) -
CSS id और CSS class में इतना फर्क नहीं होता हैं । CSS क्लास के साथ डॉट को लगाया जाता हैं जबकि CSS आईडी(id) में # साइन को लगाया जाता हैं । CSS बना कर HTML में उपयोग करके हटम्ल पेज को design किया जाता हैं । कस क्लास के द्वारा भी ऐसे ही डिज़ाइन किया जा सकता हैं । CSS को बनाने के ये दो तरिके होते हैं । चलिए सिंटेक्स से समझते हैं ।
#header{
}
इस सिंटेक्स में देख सकते हैं की किस तरह से क्लास की जगा आईडी को डिफाइन किया गया हैं ।
CSS को कैसे उपयोग करते हैं ?
CSS का उपयोग करने से पहले HTML सारेमें बहुत सरे ऐसे tags हैं । जिनके द्वारा डॉक्यूमेंट पेज को प्रेजेंट किया जाता था । HTML में सभी colors, background styles, element alignments, borders को बार बार लिखा जाता था। हटम्ल में ये बहुत जायदा कठिन होता था और यह बहुत टाइम भी लेता था । यदि आपको एक ब्लॉक को प्रेजेंट करना होता था तो बार बार हटम्ल font ,color, साइज जैसे टैग को देना पड़ता था जबकी same कोड ब्लॉक के लिए भी बार बार ये ही करना पड़ता था ।
उदाहरण के लिए, हेडिंग (h1 एलिमेंट्स), sub-हेडिंग (h2), सब-सब-हेडिंग (h3), इत्यादि को HTML का उपयोग करके एक स्ट्रक्चर के रूप में use किया जाता हैं ।
यदि इन हैडिंग को भी color,size में प्रेजेंट करना होता था तो तब भी HTML के कुछ font और size के tage elements को अलग लाग लिखना पड़ता था ।
यदि CSS का उपयोग न करे तो HTML में हम एक हैडिंग <h2> के लिए बार बार font कलर देते रहेंगे जितनी भी बार <h2> tag पेज पर आएगा उतनी ही बार फॉण्ट कलर देना पड़ेगा । इस से पेज का साइज बढ़ता हैं जो की अच्छा नहीं माना जाता हैं और पेज को ओपन होने में टाइम लगता हैं ।
example से समझते हैं -
पहले हटम्ल में यदि हैडिंग को कलर करना होता था तो तब ऐसे उपयोग करते थे -
This is my sub heading
यदि इसे ही हम CSS में करे तो कैसे होगा -
This is my sub heading
इस CSS को हम inline CSS के नाम से जानते है । यह CSS को लिखने का अच्छ तरीका नहीं हैं । क्युकी यदि पेज में एक से ज्यादा <h2> हैडिंग होती हैं फिर -
This is my sub heading 1
This is my sub heading 2
This is my sub heading 3
इसमें आप देख सकते हैं की CSS स्टाइल को बार बार उपयोग किया गया हैं । अब तक हमने HTML में CSS को डायरेक्ट use किया है।
अब हम सीखेंगे की HTML के एक हैडिंग एलिमेंट के लिए केवल एक बार ही CSS क्रिएट करना होता हैं ।
चलिए एक example से समझते हैं -
सबसे पहले एक CSS को क्रिएट करते हैं । ऊपर के example में <h2> हैडिंग के लिए बार बार CSS को use किया गया हैं परन्तु यहाँ पर ऐसा नहीं करेंगे यहाँ पर हम सिर्फ एक बार <h2> heading एलिमेंट के लिए CSS को बना देंगे और वो कम्पलीट पेज पर जितने भी <h2> हैडिंग होंगे सबके लिए इफ़ेक्ट करेगी ।
CSS को बनाये -
CSS को HTML पेज पर बनाने के लिए <style> </style> tag के बिच लिखा जाता हैं । CSS को हमेशा HTML के हेड टैग में लिखा जाता हैं ।
सबसे पहले एक सिंपल CSS stylesheet को बना लेते हैं -
CSS stylesheet ब्लॉक{ } में CSS के attributes , properties का उपयोग कर सकते हैं यहाँ पर हम सिंपल समझेंगे की इस CSS को HTML में कैसे यूज करते हैं -
CSS को HTML कैसे लिखते है ?
CSS को हटम्ल के
टैग में लिखा जाता हैं । इस तरिके को internal CSS के नाम से जाना जाता हैं क्युकी हम HTML कोड के अंदर ही CSS को लिख रहे हैं । चलिए बनाई हुई CSS को हटम्ल में उपयोग करते हैं ।<!DOCTYPE html>
<html>
<head>
<title>Web title is here</title>
</head>
<body>
This is my sub heading 1
This is my sub heading 2
This is my sub heading 3
</body>
</html>
ऊपर दिए गए example में हमने CSS को हेड टैग में लिखा हैं ओट <body> में <h2> को 3 बार उपयोग किया हैं इस से जितने भी <h2> टैग हैं खुद से उनका टेक्स्ट ग्रीन हो जायेगा । इसी तरिके से <p> टैग , <h1> से <h6> हैडिंग टैग आदि का उपयोग करके CSS का इफ़ेक्ट देखा जा सकता हैं ।
यहाँ पर सिर्फ बेसिक बातो को समझेंगे -
अगला तरीका यह होता हैं जो बहुत ज्यादा उपयोग किया जाता हैं । CSS को बनाने के लिए CSS फाइल को अलग से बनाया जा सकता हैं उस फाइल को HTML में HTML link tag की मदता से लिंक किया जा सकता हैं ।
CSS को notepad, notepad++ या किसी भी टेक्स्ट एडिटर में बनाया जा सकता हैं । एक नई फाइल (New file) में CSS का कोड को लिखे उस फाइल को style.css के नाम से सेव कर दिया जाता हैं । CSS फाइल का नाम कुछ भी हो सकता हैं परन्तु CSS का एक्सटेंशन .css (dot css) को जरूर देना पड़ता
जैसे -
style.css
header.css
footer.css
etc -
अब इस फाइल को HTML के <head> </head>
<!DOCTYPE html>
<html>
<head>
<title>External CSS in HTML </title>
</head>
This is my sub heading 1
This is my sub heading 2
This is my sub heading 3
</body>
</html>
यदि CSS किसी फोल्डर में तो सही path देना पड़ता हैं तभी CSS HTML पर इफ़ेक्ट करती हैं। यदि CSS फाइल और HTML फाइल एक जगह हैं तब कोई भी path देने की जरूरत नहीं पड़ती हैं । इस तरह से CSS को जितना भी कोड होता हैं वह CSS फाइल में ही किया जाता हैं ।
CSS Tutorials के बारे में जानकारी -
ऊपर दिए गए जानकारी में हमने बेसिक बातो को सीखा हैं । CSS Tutorials में सभी जानकारियॉ को सीखेंगे वो भी हिंदी (Hindi) भाषा में ।
CSS को सीखना बहुत आसान होता हैं और इसमें बहुत सारी attributes और properties को हम CSS के tutorials में sikhte जायेंगे ।
