अक्सर इंटरनेट पर आप उन चुनिंदा वेबसाइट्स पर विजिट करते होंगे जिनका layout और लुक्स दोनों यूजर्स का ध्यान आकर्षित करते है। परंतु शायद ही आपको पता होगा कि आकर्षक दिखाई देने वाले इन वेब Pages को कंप्यूटर की किस लैंग्वेज का इस्तेमाल करके बनाया गया है।
अगर आपको यह नहीं पता है तो बता दें कि CSS वह भाषा है जिसके द्वारा अधिकतर वेबसाइट्स बनाया जाता है। इसलिए इस लेख में आज हम आपको “CSS क्या है” और “CSS कितने प्रकार का होता है” साथ ही “CSS कैसे सीखें” इस विषय पर पूरी जानकारी हिंदी में देंगे।
सीएसएस (CSS) क्या है? What is CSS in Hindi
CSS वेब पेजेस को Design करने वाली एक भाषा है। दूसरे शब्दों में समझें तो CSS वेब दस्तावेज को स्टाइल करने के लिए उपयोग में लाई जाने वाली एक भाषा है। सर्वप्रथम इसका पहला वर्जन साल 1996 में पब्लिश हुआ था और इसका सबसे लेटेस्ट वर्जन CSS3 है।
किसी भी वेब पेज के डिजाइन को बदलने के लिए आवश्यक कंपोनेंट जैसे layout, colors या Fonts इत्यादि को HTML कोडिंग के साथ मिलाकर CSS का यूज़ किया जाता है।
जब वेबपेज के लेआउट को स्टाइल करने की बारी आती है तब कैस्केडिंग स्टाइल शीट का इस्तेमाल किया जाता है और यही नहीं टेक्स्ट के कलर को डिजाइन करने के लिए, फोंट और स्टाइल के लिए साथ ही वेबपेज के दूसरे पहलुओं को डिजाइन करने के लिए भी कैस्केडिंग स्टाइल शीट यानी CSS का इस्तेमाल किया जाता है।
वर्तमान में अलग-अलग प्रकार के एप्लीकेशन और वेब एप्लीकेशन के बीच इंटरफ़ेस क्रिएट करने के लिए भी वेबसाइट में सीएसएस का इस्तेमाल एचटीएमएल और जावास्क्रिप्ट के साथ करते हैं।
चूंकि इस बात से तो आप भली-भांति परिचित होंगे कि वेब डॉक्यूमेंट का बेसिक स्ट्रक्चर तैयार करने के लिए एचटीएमएल का इस्तेमाल किया जाता है। और फिर उस वेब पेज को आवश्यक रूप देने के लिए जिस भाषा का इस्तेमाल किया जाता है उसे ही CSS का नाम दिया गया है।
सीएसएस नामक इस प्रोग्रामिंग भाषा को फ्री फॉर्मेट में लिखा जाता है। यही नहीं अपितु CSS का उपयोग एक्सएमएल, एसक्यूएल के अलावा दूसरे प्रकार के एक्सएमएल दस्तावेज के साथ भी कर सकते हैं।
सीएसएस (CSS) का फुल फॉर्म
CSS का संक्षिप्त नाम Cascading Style Sheet होता है। CSS भाषा के आगमन से पूर्व इंटरनेट पर किसी भी दस्तावेज को बिना फॉर्मेटिंग के ही पब्लिश किया जाता था परंतु बाद में इस प्रॉब्लम का सॉल्यूशन ढूंढते हुए एचटीएमएल स्टाइल टैग का डेवलपमेंट हुआ।
परंतु इससे भी बात नहीं बनी। उसके बाद फिर डेवलपमेंट पर काम किया जाने लगा और इसके पश्चात एक नई लैंग्वेज का निर्माण हुआ जिसे सीएसएस का नाम दिया गया।
इसके अलावा अगर आप इनफार्मेशन टेक्नोलॉजी के स्टूडेंट हैं या फिर आप कंप्यूटर साइंस का कोर्स कर रहे हैं अथवा कोडिंग में आपका दिमाग काफी ज्यादा लगता है या फिर आप चाहते हैं कि गेम्स, वेबसाइट, एप्लीकेशन जैसी चीजें आप खुद ही बनाए तो इसके लिए भी आपको CSS सीखना पड़ेगा। तो अब मुख्य प्रश्न आता है की आखिर हम CSS कैसे सीखे?
सीएसएस (CSS) कैसे सीखे? How to learn CSS in Hindi
CSS को ऑनलाइन भी सीखा जा सकता है साथ ही ऑफलाइन भी सीखा जा सकता है। अगर आप किसी बेहतरीन ऑनलाइन सोर्स की तपाश में हैं तो आप W3Schools.com,Javatpoint.com,Tutorialspoint.com,Codeacademy.com जैसी वेबसाइट का इस्तेमाल कर सकते हैं। इसके अलावा आप Udemy , Udacity जैसी एप्लीकेशन का भी इस्तेमाल कर सकते हैं, साथ ही आप चाहे तो यूट्यूब पर मौजूद वीडियो को भी देख कर के सीएसएस को सीख सकते हैं।
अगर किसी व्यक्ति के द्वारा इसे ऑफलाइन सीखा जाता है तो वह कोचिंग इंस्टीट्यूट ज्वाइन करके इसे सीख सकता है अथवा मार्केट से किताबें खरीद करके भी इसके बारे में स्टडी कर सकता है।
परंतु हमारी आपको सलाह रहेगी की अगर आप एक वेब डेवलपर बनाना चाहते हैं या फिर अन्य कोई IT कोर्स करना चाहते हैं जिसमें CSS सीखना आपके करियर के लिए मददगार होगा तो आप CSS सीखना शुरू कर सकते है।
सीएसएस (CSS) का इतिहास| History of CSS in Hindi
साल 1994 में Håkon Wium Lie नाम के व्यक्ति के द्वारा 10 अक्टूबर के दिन सीएसएस की खोज की गई थी और इसे मेंटेन करने के लिए एक ग्रुप W3C के अंदर क्रिएट किया गया था जिसका पूरा नाम सीएसएस वर्किंग ग्रुप था।
यह ग्रुप मुख्य तौर पर स्पेसिफिकेशन डॉक्यूमेंट तैयार करने का काम करता था और इसके अलावा सीएसएस को अपडेट करने की जिम्मेदारी भी सीएसएस वर्किंग ग्रुप के ऊपर ही थी।
अगर यह कहा जाए कि सीएसएस एचटीएमएल की छोटी बहन है तो इसमें कोई बड़ी बात नहीं होगी, क्योंकि जब एचटीएमएल की खोज हुई तो उसके थोड़े समय के पश्चात ही सीएसएस पर भी रिसर्च होने लगी थी और एचटीएमएल के बाद सीएसएस को आने में भी ज्यादा टाइम नहीं लगा था। अभी तक सीएसएस के कुल तीन वर्जन लॉन्च हो चुके हैं, जो CSS Level 2, CSS Level 2.1 और CSS Level 3 है।
सीएसएस (CSS) के प्रकार | Types of CSS in Hindi
सामान्य तौर पर CSS के कुल तीन प्रकार हैं, जिसकी जानकारी आगे आपको दी जा रही है।
Inline Style Sheet
अगर किसी एक वेब पेज में आपको किसी सिंगल लाइन को इस्तेमाल करने की आवश्यकता है तो उस जगह पर इनलाइन स्टाइल को इस्तेमाल करने के लिए स्टाइल शीट का इस्तेमाल किया जा सकता है।
बता दें कि आप इसका इस्तेमाल किसी विशेष एचटीएमएल एलिमेंट को कॉन्फ़िगर करने के लिए कर सकते हैं, इससे आप आसानी से इसके द्वारा किसी एक एलिमेंट को कन्वर्ट कर सकते हैं। खास बात यह है की इसके द्वारा जब आप किसी एलिमेंट को चेंज करते हैं तो उसकी वजह से दूसरे एलिमेंट में कोई भी चेंज या फिर बदलाव नहीं होता है।
Embedded or Internal Style Sheet
पेज के टॉप पर जो हेड सेक्शन होता है वहां पर इंटरनल स्टाइल शीट का उपयोग किया जाता है और इसके जो नियम होते हैं वह पेज के अंदर मौजूद सभी एलिमेंट पर अप्लाई होते हैं। जब इंटरनल स्टाइल एलिमेंट का इस्तेमाल किया जाता है तो साथ में उसमें टाइप एटरीब्यूट का भी इस्तेमाल किया जा सकता है।
External Style Sheet
सीएसएस का जो सबसे बड़ा स्टाइलसीट होता है उसे एक्सटर्नल स्टाइलशीट कहा जाता है। इसमें हम एक विशेष फाइल का इस्तेमाल करते हैं और विशेष फाइल में सीएसएस कोडिंग की जाती है और फिर उसे .css extension मे सेव कर दिया जाता है।
सीएसएस (CSS) स्टाइल के प्रकार | Types of CSS Style in Hindi
सीएसएस स्टाइल शीट के भी मुख्य तौर पर तीन प्रकार हैं। आइए उनके बारे में जानकारी प्राप्त
Nline Styles Sheet
नीचे आपको जो उदाहरण दिया गया है उसे आप ध्यान से देखें। नीचे दिए हुए उदाहरण में बॉडी टैग में स्टाइल Attribute के बारे में बताया गया है और उसके पश्चात प्रॉपर्टी और वैल्यू डिफाइन भी की गई है।
<html>
<head>
<title>Inline CSS Demo</title>
</head>
<body style=”background-color:red”>
<p>This is inline CSS Demo</p>
</body>
</html>
Internal Style Sheet
टैग के अंदर आप स्टाइल को इंटरनल सीट में डिफाइन नहीं कर सकते हैं क्योंकि उसे हेड सेक्शन में डिफाइन करते हैं। उसके पश्चात सिलेक्टर का इस्तेमाल किया जाता है और फिर स्टाइल को डिफाइन किया जाता है। बता दें उसमें सीएसएस कोड और एचटीएमएल कोड को एक ही दस्तावेज में डिफाइन करते हैं।
<html>
<head>
<title>Internal Style Demo</title>
<style>
body{
background-color:red;
}
</style>
</head>
<body>
<p>This is internal style sheet</p>
</body>
</html>
वेब डेवलपर (Web Developer) कैसे बने
External Style Sheet
इसके संदर्भ में सीएसएस दूसरी फाइल के साथ भी लिंक होता है और जिसके साथ एक्सटर्नल स्टाइल शीट लिंक होती है वह फाइल एचटीएमएल फाइल से <link> टैग से कनेक्टेड होती है। हमें इसमें बार बार कोड नहीं लिखना पड़ता है और आपको यह भी बता दें कि आप सीएसएस फाइल को विभिन्न एचटीएमएल फाइल से लिंक कर सकते हैं।
<html>
<head>
<title>External Style Demo</title>
<link rel=”stylesheet” type=”text/css” href=”externalDemo.css”>
</head>
<body>
<p> This is external stylesheet</p>
</body>
</html>
External Demo.css File
body{
background-color:blue;
}
सीएसएस (CSS) की विशेषताएं
- अगर आप अपने द्वारा निर्माण किए गए वेब पेज को अट्रैक्टिव बनाना चाहते हैं तो इसके लिए ट्रांजिशन और एनिमेशन का इस्तेमाल आप सीएसएस में आसानी के साथ कर सकते हैं।
- अगर आपको अपना समय बचाना है तो भी आप सीएसएस का इस्तेमाल कर सकते हैं, क्योंकि आप विभिन्न एचटीएमएल वेब पेज पर आसानी से सीएसएस फाइल का इस्तेमाल कर सकते हैं।
- आपको तब एचटीएमएल एलिमेंट को स्टाइल देने के लिए हर टैग में अटरीब्यूट लगाने की जरूरत नहीं पड़ेगी जब आप सीएसएस का इस्तेमाल करेंगे।
- वहीं अगर आप एक ही स्टाइल किसी भी एचटीएमएल एलिमेंट को देना चाहते हैं तो आप आसानी से सीएसएस का इस्तेमाल कर सकते हैं और सीएसएस फाइल में एक साथ स्टाइल दे सकते हैं जिसकी वजह से एचटीएमएल का कोड भी कम हो जाता है।
- अगर कभी आपको वेब पेज की डिजाइन को बदलने की इच्छा करें तो आप उसी फाइल की लाइन को अपडेट कर सकते हैं। ऐसा करने से वेबसाइट का जो भी डिजाइन होगा, वह ऑटोमेटिक ही अपडेट हो जाएगा।
- अगर आप अपनी वेबसाइट को लैपटॉप, डेस्कटॉप, प्रिंटर, मोबाइल, टेबलेट जैसे डिवाइस के लिए रेस्पॉन्सिव बनाना चाहते हैं तो इसके लिए भी आप सीएसएस का इस्तेमाल कर सकते हैं और एक बढ़िया रेस्पॉन्सिव डिजाइन क्रिएट कर सकते हैं।
सीएसएस (CSS) के लाभ
नीचे जानिए कि कास्केडिंग स्टाइलशीट के लाभ क्या होते हैं।
- कैस्केडिंग स्टाइल शीट्स की वजह से व्यक्ति का काफी समय बच जाता है।
- इसके जरिए लगातार परिवर्तन काफी आसानी से किया जा सकता है।
- वेब पेज की लोडिंग स्पीड में भी सुधार करने में यह काफी काम आता है।
- यह फिर से अपनी मूल स्थिति में आने की कैपेसिटी रखता है।
- अलग स्क्रीन साइज के डिवाइस के साथ यह बेहतर तरीके से कार्य कर काम करता है।
- CSS को काफी आसानी से मेंटेन किया जा सकता है।
- विंडोज और लिनक्स जैसे सभी सिस्टम पर आसानी के साथ कैस्केडिंग स्टाइल शीट को इस्तेमाल किया जा सकता है और यही नहीं यह विभिन्न प्रकार के ब्राउज़र को भी सपोर्ट करता है।
FAQ:
CSS का प्रयोग किस लिए किया जाता है?
वेब पेज को रंग रूप देने के लिए।
CSS की खोज किसने की?
Hakon Wiuam Lie
CSS की खोज कब हुई?
1994
CSS का फुल फॉर्म क्या होता है?
Cascading Style Sheet