CSS क्या है और यह वेबसाइट पर क्या करता है?

CSS तय करता है कि आपकी वेबसाइट कैसी दिखे। रंग, फ़ॉन्ट, स्पेसिंग, लेआउट, सब CSS है। जानें यह क्या है, कैसे काम करता है और आपके ब्रांड के लिए क्यों मायने रखता है।

क्या आप कभी ऐसी दो वेबसाइट पर गए हैं जिनका कंटेंट लगभग एक जैसा है लेकिन दिखती बिल्कुल अलग हैं? एक सुघड़, साफ़ और पढ़ने में आसान है। दूसरी बिखरी, पुरानी सी और इस्तेमाल में मुश्किल लगती है। कंटेंट शायद एक ही है। जो चीज़ उन्हें इतना अलग दिखाती है, वह CSS है।

पिछले चैप्टर में आपने सीखा कि HTML वेबपेज को स्ट्रक्चर देता है। वह ब्राउज़र को बताता है कि हर चीज़ क्या है: हेडिंग, पैराग्राफ़, इमेज, बटन। लेकिन HTML अपने आप में कोई स्टाइल नहीं रखता। CSS के बिना हर वेबसाइट सादे टेक्स्ट डॉक्यूमेंट जैसी दिखेगी। CSS उस स्ट्रक्चर को विज़ुअल अनुभव में बदलता है।

CSS क्या है?

CSS का मतलब है Cascading Style Sheets। यह एक भाषा है जो वेबपेज की विज़ुअल प्रस्तुति तय करती है। जहाँ HTML कहता है "यह हेडिंग है," वहाँ CSS कहता है "इस हेडिंग का रंग गहरा नीला हो, ऊँचाई 32 पिक्सल हो और यह ख़ास फ़ॉन्ट इस्तेमाल करे।" जहाँ HTML कहता है "यह बटन है," वहाँ CSS कहता है "यह बटन हरा हो, इसके कोने गोल हों और यह ऊपर के टेक्स्ट से 20 पिक्सल दूर रहे।"

वेबसाइट पर आप जो भी विज़ुअल फ़ैसला देखते हैं, रंग, फ़ॉन्ट, साइज़, स्पेसिंग, लेआउट, होवर इफ़ेक्ट, बैकग्राउंड, वह CSS से आता है। यह वेब की डिज़ाइन परत है।

CSS कैसे काम करता है?

CSS HTML एलिमेंट को टारगेट करके उन पर स्टाइल नियम लगाता है। आप CSS को बताते हैं कि किस एलिमेंट को स्टाइल करना है और फिर बताते हैं कि वह कैसा दिखे। ये नियम एक अलग फ़ाइल में लिखे जाते हैं जिसे ब्राउज़र HTML के साथ लोड करता है। जब ब्राउज़र दोनों फ़ाइलें साथ पढ़ता है, तो वह मेल खाते एलिमेंट पर स्टाइल लगाता है और तैयार पेज दिखाता है।

नाम का "cascading" हिस्सा बताता है कि CSS टकराव कैसे संभालता है। अगर एक ही एलिमेंट पर कई स्टाइल नियम लागू हों, तो CSS प्राथमिकता के तय क्रम से तय करता है कि कौन सा नियम जीतेगा। ज़्यादा ख़ास नियम आम नियमों को ओवरराइड कर देते हैं। यह सिस्टम डिज़ाइनर को पूरी वेबसाइट पर हर एलिमेंट के दिखने पर सटीक कंट्रोल देता है।

CSS के प्रकार

CSS तीन अलग तरीक़ों से लिखा जा सकता है। हर तरीक़ा चलता है, लेकिन हर हालात के लिए बराबर ठीक नहीं है।

1. इनलाइन CSS

इनलाइन CSS सीधे किसी एक HTML एलिमेंट पर लिखा जाता है। यह सिर्फ़ उसी एक एलिमेंट पर असर डालता है और उस पर लगे बाकी स्टाइल को ओवरराइड कर देता है। यह जल्दी के एक बार वाले बदलाव के लिए काम का है, पर बड़े पैमाने पर समस्या बन जाता है। अगर आप 50 एलिमेंट में इस्तेमाल हुआ कोई रंग बदलना चाहें, तो उसे एक की जगह 50 जगह बदलना पड़ेगा।

2. इंटरनल CSS

इंटरनल CSS HTML फ़ाइल के अंदर ही style टैग में लिखा जाता है, आम तौर पर पेज के ऊपर की तरफ़। यह सिर्फ़ उसी पेज पर लागू होता है। एक पेज या छोटे प्रोजेक्ट के लिए यह ठीक है, लेकिन पूरी वेबसाइट के लिए इसका मतलब है हर पेज पर वही स्टाइल दोहराना। एक चीज़ बदलें तो हर फ़ाइल अलग-अलग अपडेट करनी पड़ती है।

3. एक्सटर्नल CSS

एक्सटर्नल CSS एक अलग फ़ाइल में रहता है जो आपके HTML पेजों से जुड़ी होती है। किसी भी असली वेबसाइट के लिए यही मानक तरीक़ा है। आप अपने सारे स्टाइल एक बार एक फ़ाइल में तय करते हैं, और जो भी पेज उससे जुड़ा है वह वही स्टाइल अपना लेता है। एक जगह रंग या फ़ॉन्ट बदलें और वह हर जगह तुरंत अपडेट हो जाता है। यह ज़्यादा साफ़ है, तेज़ लोड होता है और संभालना कहीं आसान है। लगभग हर अच्छी बनी वेबसाइट अपनी नींव के तौर पर एक्सटर्नल CSS इस्तेमाल करती है।

आपकी वेबसाइट पर CSS क्या-क्या तय करता है

CSS आपकी वेबसाइट के लगभग हर विज़ुअल पहलू को छूता है। ये उसके मुख्य दायरे हैं।

रंग और बैकग्राउंड

आपकी वेबसाइट का हर रंग, टेक्स्ट का रंग, बैकग्राउंड का रंग, बटन का रंग, बॉर्डर का रंग, CSS से सेट होता है। आपके ब्रांड के रंग पूरी साइट पर एक जैसे इसलिए लगते हैं कि उन्हें CSS में एक बार तय करके हर जगह दोबारा इस्तेमाल किया जाता है।

टाइपोग्राफ़ी

आपकी वेबसाइट कौन सा फ़ॉन्ट इस्तेमाल करती है, हेडिंग और बॉडी टेक्स्ट का साइज़, लाइनों के बीच की दूरी, टेक्स्ट बोल्ड है या इटैलिक, यह सब CSS है। अच्छी टाइपोग्राफ़ी कंटेंट को पढ़ने में आसान बनाती है और आपके ब्रांड की पहचान को मज़बूत करती है।

लेआउट और स्पेसिंग

कॉलम कैसे सजे हैं, सेक्शन के बीच कितनी जगह है, कंटेंट एरिया कितना चौड़ा है, साइडबार कहाँ दिखता है, CSS इन सबको कंट्रोल करता है। लेआउट के नियम हर पेज का वह पूरा स्ट्रक्चर तय करते हैं जो HTML से आगे जाता है।

रिस्पॉन्सिव बर्ताव

रिस्पॉन्सिव डिज़ाइन भी CSS की वजह से काम करता है। CSS के मीडिया क्वेरी ब्राउज़र को बताते हैं कि स्क्रीन के साइज़ के हिसाब से अलग स्टाइल लगाए। डेस्कटॉप पर कंटेंट तीन कॉलम में दिख सकता है। फ़ोन पर CSS उन कॉलम को ऊपर-नीचे सजा देता है ताकि सब कुछ छोटी स्क्रीन में आ जाए।

एनिमेशन और इफ़ेक्ट

बटन पर होवर इफ़ेक्ट, सेक्शन के बीच स्मूद ट्रांज़िशन, स्क्रोल करने पर कंटेंट का धीरे से दिखना, ये सब CSS हैं। ये बिना किसी JavaScript के अनुभव में गति और निखार जोड़ते हैं।

ब्रांड मालिक के तौर पर आपकी वेबसाइट के लिए इसका क्या मतलब है

अच्छी डिज़ाइन वाली वेबसाइट के लिए आपको CSS लिखना नहीं आना चाहिए, ऐसा नहीं है। वेबसाइट बिल्डर यह आपके लिए संभालते हैं। जब आप टेम्पलेट चुनते हैं, ब्रांड के रंग चुनते हैं और फ़ॉन्ट सेट करते हैं, तो प्लेटफ़ॉर्म पर्दे के पीछे उन चुनावों को CSS नियमों में बदल देता है। विज़ुअल एडिटर में आप जो भी बदलाव करते हैं, वह ऐसा CSS बनाता है जिसे ब्राउज़र पढ़कर लागू करता है।

आपके लिए मायने यह रखता है कि आपका प्लेटफ़ॉर्म जो CSS बनाए वह साफ़ और कुशल हो। भारी या फूला हुआ CSS आपके पेज के लोड होने की रफ़्तार घटाता है। अच्छी तरह लिखा CSS आपकी साइट को हर पेज पर तेज़ और एक जैसा रखता है। WEMASY का वेबसाइट बिल्डर ऑप्टिमाइज़्ड CSS अपने आप बनाता है, इसलिए आपके डिज़ाइन के चुनाव आपके पेज पर बेकार वज़न जोड़े बिना साफ़ तरीक़े से लागू होते हैं। यह परफ़ॉर्मेंस से कैसे जुड़ता है, यह समझने के लिए वेबसाइट स्पीड क्या है और यह क्यों मायने रखती है पढ़ें।

अक्सर पूछे जाने वाले सवाल