कैस्केडिंग स्टाइल शीट या CSS एक ऐसी भाषा है जो वेबपेज को बताती है कि उसे कैसा दिखना चाहिए। CSS वेबसाइट की सादी संरचना में रंग, शैली और लेआउट जोड़ता है। जिस तरह आप अपने कपड़े अच्छे दिखने और साफ-सुथरे दिखने के लिए चुनते हैं, उसी तरह CSS वेबपेज को आकर्षक बनाने और आकर्षक दिखने में मदद करता है। वेब डेवलपमेंट में, हम पेज पर टेक्स्ट और बॉक्स का रंग, आकार और स्थिति बदलने के लिए CSS का उपयोग करते हैं। यह पाठ आपको सरल भाषा में CSS की मूल बातें बताएगा। हम सीखेंगे कि CSS क्या है, यह क्यों महत्वपूर्ण है और यह HTML के साथ कैसे काम करता है।
CSS का मतलब है कैस्केडिंग स्टाइल शीट्स। यह वेबपेज को स्टाइल करने के लिए इस्तेमाल की जाने वाली एक विशेष भाषा है। CSS को किसी इमारत के लिए पेंट और सजावट के रूप में सोचें। इमारत HTML से बनी है, और CSS इसे सुंदर बनाती है। CSS का उपयोग करके, आप अपने वेबपेज पर पृष्ठभूमि का रंग, फ़ॉन्ट स्टाइल और तत्वों के आस-पास की जगह बदल सकते हैं। CSS एक ऐसा टूल है जो वेब डिज़ाइनरों को वेबसाइट को बेहतर और अधिक मज़ेदार बनाने में मदद करता है।
कल्पना करें कि आप एक ड्राइंग में रंग भर रहे हैं। ड्राइंग की रेखाएँ किसी वेबसाइट की मूल संरचना की तरह होती हैं। CSS क्रेयॉन और मार्कर की तरह है जो ड्राइंग में जान डाल देते हैं। कुछ सरल नियमों के साथ, आप अपनी पूरी ड्राइंग को सादे से रंगीन में बदल सकते हैं!
CSS का उपयोग वेबसाइटों को आकर्षक और उपयोग में आसान बनाने के लिए किया जाता है। यह स्टाइल को कंटेंट से अलग रखता है। इसका मतलब है कि पेज पर शब्द और चित्र (HTML द्वारा प्रदान किए गए) समान रहते हैं, जबकि CSS नियंत्रित करता है कि वे कैसे दिखते हैं। जब आप स्टाइल अपडेट करते हैं, तो आपको कंटेंट बदलने की ज़रूरत नहीं होती। यह अलगाव वेब डेवलपर्स को तेज़ी से काम करने में मदद करता है और साइटों को देखने में बेहतर बनाता है।
CSS को अपने द्वारा चुने गए परिधान की तरह समझें। यदि आप अलग-अलग कपड़े पहनते हैं, तो आप अलग दिखते हैं, लेकिन आप फिर भी वही व्यक्ति हैं। CSS किसी वेबसाइट पर मौजूद जानकारी को बदले बिना उसका रूप बदल देता है। इससे सिर्फ़ एक CSS फ़ाइल को संपादित करके पूरी वेबसाइट के डिज़ाइन को अपडेट करना आसान हो जाता है।
CSS HTML के साथ मिलकर काम करता है। HTML वह आधार है जो यह निर्धारित करता है कि वेबपेज पर चीजें कहां जाएंगी। फिर CSS रंग, फ़ॉन्ट और स्टाइल जोड़ने के लिए आता है। जब कोई ब्राउज़र वेबपेज लोड करता है, तो वह पहले HTML के साथ संरचना बनाता है और फिर CSS में परिभाषित शैलियों को लागू करता है।
CSS को नियमों के एक सेट के रूप में लिखा जाता है। प्रत्येक नियम के दो भाग होते हैं: एक चयनकर्ता और एक घोषणा ब्लॉक। चयनकर्ता ब्राउज़र को बताता है कि किस HTML तत्व को स्टाइल करना है। घोषणा ब्लॉक में एक या अधिक घोषणाएँ होती हैं। प्रत्येक घोषणा में एक गुण और एक मान होता है। गुण वह है जिसे आप बदलना चाहते हैं, और मान बताता है कि इसे कैसे बदला जाए।
उदाहरण के लिए, पृष्ठ का पृष्ठभूमि रंग हल्का नीला सेट करने के लिए, आप एक नियम लिख सकते हैं जो इस प्रकार दिखता है:
<कोड>बॉडी {
पृष्ठभूमि-रंग: हल्का नीला;
}</कोड>यह सरल नियम पूरे पृष्ठ की पृष्ठभूमि बदल देता है।
एक बुनियादी CSS नियम एक सरल पैटर्न का अनुसरण करता है। यह चयनकर्ता और गुणों और मूल्यों का एक ब्लॉक दिखाता है। पैटर्न इस तरह दिखता है:
<कोड>चयनकर्ता {
संपत्ति मूल्य;
}</कोड>यहाँ, चयनकर्ता चुनता है कि किस HTML तत्व को लक्षित करना है। प्रॉपर्टी वह है जिसे आप बदलना चाहते हैं, और वैल्यू वह है जिसे आप बदलना चाहते हैं।
उदाहरण के लिए, यदि आप चाहते हैं कि सभी पैराग्राफ का पाठ नीला हो, तो आप लिखें:
<कोड>पी {
रंग नीला;
}</कोड>यह नियम वेब ब्राउज़र को बताता है कि प्रत्येक <p> (पैराग्राफ) तत्व का पाठ नीला होना चाहिए।
CSS चयनकर्ता आपको यह चुनने देते हैं कि आपके वेबपेज पर कौन से तत्व स्टाइल नियमों से प्रभावित होंगे। चयनकर्ता कई प्रकार के होते हैं, और हर एक थोड़ा अलग तरीके से काम करता है।
ये अलग-अलग चयनकर्ता आपको अपने वेबपेज के विशिष्ट भागों को स्टाइल करने की बहुत शक्ति देते हैं। वे आपको तत्वों को सटीक रूप से लक्षित करने और यह तय करने की अनुमति देते हैं कि उन्हें कैसा दिखना चाहिए।
CSS कई अलग-अलग गुण प्रदान करता है जिनका उपयोग आप अपने वेबपेज को स्टाइल करने के लिए कर सकते हैं। प्रत्येक गुण आपको किसी तत्व की उपस्थिति के एक विशिष्ट पहलू को बदलने देता है। कुछ सामान्य गुण ये हैं:
प्रत्येक CSS प्रॉपर्टी के बाद एक मान होता है। उदाहरण के लिए, टेक्स्ट को लाल रंग देने के लिए, आप लिख सकते हैं:
<कोड>पी {
रंग: लाल;
}</कोड>यह सरल नियम सभी पैराग्राफ़ में लाल रंग का टेक्स्ट बनाता है। रंग गुण नियंत्रित करता है कि टेक्स्ट कैसा दिखाई देगा और लाल मान बताता है कि उसका रंग क्या होना चाहिए।
CSS में "कैस्केडिंग" शब्द का अर्थ है कि शैलियाँ एक नियम से दूसरे नियम तक प्रवाहित हो सकती हैं। यदि दो नियम एक ही तत्व पर लागू हो सकते हैं, तो क्रम यह तय कर सकता है कि कौन सा नियम जीतता है। यह स्टैकिंग ब्लॉक के समान है जहाँ एक ब्लॉक कभी-कभी दूसरे ब्लॉक के हिस्से को कवर करता है।
एक सामान्य नियम यह है कि HTML तत्व के अंदर सीधे लिखी गई शैलियाँ (जिन्हें इनलाइन शैलियाँ कहा जाता है) आपकी CSS फ़ाइल में शैलियों को ओवरराइड कर देंगी। एक और नियम यह है कि यदि कोई पैरेंट तत्व स्टाइल किया गया है, तो उसके चाइल्ड तत्व उस शैली को विरासत में ले सकते हैं जब तक कि उन्हें अन्यथा न बताया जाए।
उदाहरण के लिए, यदि आप <div> के टेक्स्ट का रंग हरा सेट करते हैं, तो <div> के अंदर का टेक्स्ट भी अक्सर वंशानुक्रम के कारण हरा दिखाई देगा। यह वेबपेज पर एक सुसंगत डिज़ाइन बनाए रखने में मदद करता है।
CSS के साथ, आप कई तरीकों से रंग बदल सकते हैं। आप लाल , नीला और हरा जैसे सामान्य रंग नामों का उपयोग कर सकते हैं। आप लाल के लिए <code>#FF0000</code> जैसे हेक्साडेसिमल कोड या <code>rgb(255, 0, 0)</code> जैसे RGB मान का भी उपयोग कर सकते हैं।
फ़ॉन्ट CSS का एक और महत्वपूर्ण हिस्सा हैं। फ़ॉन्ट एक नोटबुक में आपके द्वारा चुनी गई हस्तलेखन शैली की तरह है। CSS में, आप फ़ॉन्ट परिवार, आकार, वजन और शैली बदल सकते हैं। उदाहरण के लिए, यदि आप चाहते हैं कि आपके पैराग्राफ Arial में दिखाई दें, तो आप इसका उपयोग कर सकते हैं:
<कोड>पी {
फ़ॉन्ट-फ़ैमिली: एरियल, सैन्स-सेरिफ़;
}</कोड>यह नियम ब्राउज़र को बताता है कि यदि एरियल फ़ॉन्ट उपलब्ध हो तो पाठ को उसी फ़ॉन्ट में प्रदर्शित करें, और यदि उपलब्ध न हो तो किसी अन्य समान फ़ॉन्ट का उपयोग करें।
सीएसएस के साथ रंग और फ़ॉन्ट बदलने से पाठ को पढ़ना आसान हो जाता है और आपका वेबपेज देखने में अधिक दिलचस्प हो जाता है।
CSS बॉक्स मॉडल यह समझने का एक तरीका है कि किसी तत्व के विभिन्न भाग पृष्ठ पर कैसे व्यवस्थित किए जाते हैं। प्रत्येक तत्व एक बॉक्स की तरह होता है। बॉक्स मॉडल में चार भाग होते हैं:
एक तस्वीर की कल्पना करें। तस्वीर ही उसकी विषय-वस्तु है। तस्वीर के चारों ओर जो मैट है, वह पैडिंग की तरह है। फ्रेम जो इसे एक साथ रखता है, वह बॉर्डर है। और फ्रेम के चारों ओर की जगह मार्जिन है। इस मॉडल का उपयोग करके, आप सुनिश्चित कर सकते हैं कि आपके डिज़ाइन के सभी हिस्सों में उचित स्थान और संतुलन हो।
CSS सिर्फ़ रंगों और फ़ॉन्ट्स के बारे में नहीं है; यह आपको वेबपेज पर तत्वों को व्यवस्थित करने में भी मदद करता है। इसे लेआउट और पोजिशनिंग कहा जाता है। CSS के साथ, आप यह तय कर सकते हैं कि पेज पर प्रत्येक तत्व कहाँ दिखाई देगा।
वेबपेज के लेआउट को नियंत्रित करने के कई तरीके हैं, जिनमें शामिल हैं:
इन लेआउट तकनीकों का उपयोग करना खिलौनों को शेल्फ पर व्यवस्थित करने जैसा है। आप तय करते हैं कि प्रत्येक खिलौना कहाँ रखा जाए ताकि उन सभी के पास पर्याप्त जगह हो और वे साफ-सुथरे दिखें। इससे आपका वेबपेज अधिक व्यवस्थित और आकर्षक बनता है।
HTML और CSS एक साथ कैसे काम करते हैं, इसका एक उदाहरण यहाँ दिया गया है। यह नमूना कोड कुछ स्टाइलिंग के साथ एक सरल वेबपेज दिखाता है:
<कोड><!DOCTYPE html>
<एचटीएमएल>
<शीर्ष>
<शैली>
शरीर {
पृष्ठभूमि-रंग: हल्का नीला;
}
एच1 {
रंग: नेवी;
फ़ॉन्ट-आकारः 24px;
}
पी {
हरा रंग करें;
फ़ॉन्ट-आकारः 18px;
}
</शैली>
</शीर्ष>
<शरीर>
<h1>मेरा पहला वेबपेज</h1>
<p>यह CSS का उपयोग करके स्टाइल किया गया एक सरल वेबपेज है।</p>
</शरीर>
</html></कोड>यह कोड हल्के नीले रंग की पृष्ठभूमि वाला वेबपेज बनाता है। हेडर टेक्स्ट नेवी रंग का है और पैराग्राफ टेक्स्ट हरा है। <code><style></code> टैग के अंदर CSS दिखाता है कि नियम कैसे लिखे और लागू किए जाते हैं।
आप अपने HTML में CSS को तीन मुख्य तरीकों से जोड़ सकते हैं। प्रत्येक विधि का उपयोग स्थिति के आधार पर अलग-अलग होता है:
व्यावसायिक वेब विकास में बाह्य विधि सबसे आम है, क्योंकि यह HTML को साफ-सुथरा रखती है और आपको एक साथ कई पृष्ठों की शैलियों को अद्यतन करने की सुविधा देती है।
CSS कई मायनों में बहुत मददगार है। वेब डेवलपमेंट में CSS का उपयोग करने के कुछ लाभ इस प्रकार हैं:
CSS का उपयोग करना एक विशेष टूलबॉक्स की तरह है। टूलबॉक्स में प्रत्येक टूल आपको अपने वेबपेज की उपस्थिति को आसानी से सुधारने में मदद करता है। जैसे-जैसे आप अभ्यास करेंगे, आप देखेंगे कि CSS वेबसाइटों को सुंदर और उपयोगकर्ता के अनुकूल बनाने में कितनी शक्तिशाली हो सकती है।
आप जिस भी वेबसाइट पर जाते हैं, वह किसी न किसी तरह से CSS का इस्तेमाल करती है। आपकी पसंदीदा कार्टून साइट से लेकर स्कूल प्रोजेक्ट पेज तक, CSS मज़ेदार और पढ़ने में आसान लेआउट बनाने में मदद करता है। जब आप साफ़-सुथरी स्पेसिंग और स्पष्ट टेक्स्ट वाला रंगीन वेबपेज देखते हैं, तो इसका मतलब है कि CSS काम कर रहा है।
गेम, कार्टून या ऑनलाइन कहानियों जैसी लोकप्रिय वेबसाइटों के डिज़ाइन पर विचार करें। रंगों, फ़ॉन्ट और लेआउट का सोच-समझकर इस्तेमाल इन वेबसाइटों को रोमांचक और आकर्षक बनाने में मदद करता है। CSS का इस्तेमाल ऐप्स और मोबाइल साइट्स में भी किया जाता है, जिससे यह सुनिश्चित होता है कि कंटेंट बड़ी स्क्रीन और छोटे फोन दोनों पर अच्छा दिखे।
रोज़मर्रा की ज़िंदगी में, CSS एक कमरे को सजाने जैसा ही है। आप अपने कमरे के लिए थीम चुन सकते हैं, रंगीन तस्वीरें लगा सकते हैं और अपने फर्नीचर को बड़े करीने से सजा सकते हैं। CSS वेबसाइट के लिए भी यही करता है। यह डिजिटल स्पेस में व्यवस्था और सुंदरता लाता है, जिससे यह विज़िटर के लिए सुखद हो जाता है।
सीएसएस के बारे में हमने जो मुख्य बातें सीखीं, वे इस प्रकार हैं:
CSS वेब डेवलपमेंट का एक महत्वपूर्ण हिस्सा है, जो साइट्स को सुंदर और नेविगेट करने में आसान बनाता है। जब आप और अधिक खोजबीन करते हैं और अपने खुद के वेबपेज बनाने की कोशिश करते हैं, तो याद रखें कि CSS आपकी रचनात्मकता को व्यक्त करने का उपकरण है। रंगों, फ़ॉन्ट और लेआउट के साथ प्रयोग करने में मज़ा लें, क्योंकि हर छोटा बदलाव एक अच्छी तरह से डिज़ाइन की गई वेबसाइट के जादू को बढ़ाता है।
अभ्यास करते रहें और अपनी पसंदीदा वेबसाइट का अवलोकन करते रहें। ध्यान दें कि आपका ध्यान आकर्षित करने और एक सुखद अनुभव बनाने के लिए विभिन्न शैलियों का उपयोग कैसे किया जाता है। समय के साथ, आप देखेंगे कि सरल HTML संरचनाओं को आकर्षक वेबपेज में बदलने में CSS कितना शक्तिशाली हो सकता है।