सीएसएस क्या है एवं इसका इतिहास ? What is CSS and its history?

आज हम सीखेंगे की सीएसएस क्या है? कैसे सीखे? (What is CSS in Hindi), सीएसएस की फुल फॉर्म क्या है? (CSS Full Form in Hindi), सीएसएस स्टाइल के प्रकार (Types of CSS in Hindi) जैसा की हम जानते है की वेब डिजाइनिंग के लिए कैस्केडिंग स्टाइल शीट्स (CSS) का उपयोग किया जाता है। CSS को 1996 में W3C द्वारा विकसित किया गया था। यह एक स्टाइल शीट भाषा है, जिसका उपयोग मार्कअप भाषा में लिखे डॉक्यूमेंट के सुंदर और आकर्षण बनाने के लिए किया जाता है, जिसमें लेआउट (Layout), रंग (Colors) और फोंट (Fonts) जैसे तत्व शामिल हैं।

सीएसएस एक वेब पेज को डायनामिक वेबपृष्ठ में बदलने का एक तरीका है। यह एचटीएमएल (HTML) के लिए एक अतिरिक्त सुविधा प्रदान करता है। यह आम तौर पर वेब पेजों और उपयोगकर्ता इंटरफेस की स्टाइल बदलने के लिए एचटीएमएल के साथ प्रयोग किया जाता है। इसका उपयोग XML, SVG, और XUL सहित किसी भी प्रकार के एक्सएमएल डाक्यूमेंट्स (XML Documents) के साथ भी किया जा सकता है।

कई मोबाइल एप्लिकेशन (Mobile Applications) के लिए वेब अनुप्रयोगों (Web Applications) और उपयोगकर्ता इंटरफेस (User Interfaces) के लिए उपयोगकर्ता इंटरफेस बनाने के लिए अधिकांश वेबसाइटों में सीएसएस का उपयोग एचटीएमएल और जावास्क्रिप्ट के साथ किया जाता है। यदि आप सीएसएस सीखते हैं, तो आप एक अच्छी वेबसाइट स्टाइल कर सकते हैं तो मूल रूप से आप कह सकते हैं कि सीएसएस हमारे वेबपृष्ठ पर मेक-अप के रूप में कार्य करता है।

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

CSS सीखना बहुत ही आसान है हमने आपके लिए CSS की complete tutorial हिंदी में बनायी है जिसे पढ़कर और practice करके आप भी बड़ी आसानी से एक attractive website बनाना सीख सकते हैं।

ध्यान रहे बिना HTML के CSS से कुछ भी नही बनाया जा सकता है इसलिए आपको HTML की जानकारी होनी जरुरी है। HTML और CSS दोनों मिलकर एक web page को रंग-रूप और आकार प्रदान करते हैं। HTML वेबपेज को आकार देता है और वहीँ CSS का काम वेबपेज को आकर्षक बनाना होता है।

सीएसएस की फुल फॉर्म क्या है? (CSS Full Form in Hindi)

सीएसएस का फुल फॉर्म “Cascading Style Sheet” है। कैस्केडिंग स्टाइल शीट का उपयोग वेब पृष्ठों के लेआउट को स्टाइल करने के लिए किया जाता है। उनका उपयोग टेक्स्ट कलर, फ़ॉन्ट और स्टाइल और वेब पृष्ठों के अन्य पहलुओं को डिजाईन करने के लिए किया जा सकता है। सीएसएस वेब डेवलपर्स को वेबसाइट को सुंदर और आकर्षक बनाने में मदद करता है।

CSS क्यों जरूरी है? इसके क्या फ़ायदे हैं?

डिजाइन को बनाए रखना आसान है: 

मान के चलिये हमने बिना CSS उपयोग किये सिर्फ़ HTML से एक वेबसाइट बनाई है जिसमें 50 पृष्ठों हैं, अब हमें चाहिये कि सारे पृष्ठों की एक ही डिजाइन होनी चाहिये तो हम एक page डिजाईन करते हैं और उसे कॉपी पेस्ट कर के 50 pages बना देते हैं इसमें कोई परेशानी नही है, इसके बाद हम सभी pages में सामग्री डाल देते हैं।

अब वेबसाइट तो तैयार है लेकिन भविष्य में अगर हमें डिजाइन में कुछ परिवर्तन करने हैं जैसे कि हमें सारे pages की शीर्षक का color blue करना हो तब हमें एक-एक पेज में जाकर changes करने पडेंगे जो कि बहुत ही समय      उपभोक्ता काम होगा।

अगर हम CSS use करते हैं तो यह काम बहुत ही आसान हो जाता है क्योंकि CSS से हम पेज के डिजाइन को सामग्री वाले part से अलग कर देते हैं, अब जब हमें डिजाइन में परिवर्तन की जरूरत पडे तो हम आसानी से CSS की file में जाकर बदलाव कर देते हैं जो पूरे वेबसाइट में लागू हो जाता है।

वेबसाइट की गति बढ़ जाती है:

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

लेकिन यदि CSS कोई उपयोग नहीं करता है और आपने HTML तालिका से लेआउट डिज़ाइन किया है तो पृष्ठ लोडिंग धीमी होगी क्योंकि ब्राउज़र को हर बार हर पृष्ठ में इस तालिका को समझनी पडेगी।

डिवाइस के हिसाब से डिज़ाइन शो कर रहे हैं:

आपने देखा होगा कुछ साइटों के डिजाईन डेस्कटॉप पर अलग और मोबाइल डिवाइस में अलग-अलग दृश्य देते हैं, जब आप परीक्षा परिणाम वाले वेबसाइट से परिणाम का प्रिंटआउट निकालते हैं तो सिर्फ़ परिणाम वाला हिस्सा ही क्यों प्रिंट होता है बाकी के हेडर, साइडबार क्यों प्रिन्ट नहीं होते हैं ,

ऐसा इसलिए क्योंकि वे CSS के जिरये डिवाइस के हिसाब से डिज़ाईन शो करते हैं, वे इसे ब्राउज़र को बताते हैं कि अगर डिवाइस मोबाईल है तो क्या दिखाना है और डिवाइस अगर प्रिंटर है तो कौन सा हिस्सा प्रिन्ट करना है।

वेब पेज CSS लागू कैसे करें?

Internal style sheet

हमको जिस पेज में style apply करना होता है उस पेज के html के <head> tag के अंदर CSS code लिखते हैं।

<html> <head> <title>Internal CSS Example</title> <style type="text/css"> p{color:blue;} </style> </head> <body> <p>This is a paragarph.</p> </body>

External style sheet

इस method में हम एक अलग file बनाकर उसमें CSS की कोड लिखते हैं और .css extension के साथ save कर देते हैं, फ़िर जिस पेज में style apply करना होता है उसमें इस फ़ाईल को लिंक कर देते हैं। CSS file को link करने के लिये html के <head> section में <link> tag का use करते हैं।

<html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”></head> <body> <p> This is a paragraph. </p> </body> </html>

Inline style sheet

HTML के जिस element में style apply करना होता है हम सीधे उसके tag में style attribute से css property apply कर दिया जाता है।

<html> <head> <title> Your page title </title></head> <body> <p style="color:green;"> This is a paragraph. </p> </body></html>

External Demo.css File

body{ background-color:blue; }

CSS का उपयोग क्यों किया जाता है?

अब तक तो आप जान ही चुके होंगे कि CSS क्या है, व इसका उपयोग किसी वेब पेज को डिजाइन लेने जैसे – उसका पेज लेआउट, टेक्स्ट कलर, फॉन्ट और टेक्स्ट स्टाइल की फॉर्मेटिंग के लिए किया जाता है। CSS एक बेहद शक्तिशाली शैली पत्रक भाषा है, जिससे हमने लिखी गई सामग्री के रूप और नियंत्रण को महसूस कर सकते हैं। मान लीजिये आपके पास कोई वेबसाइट तत्व (शीर्षक) है।

अब अगर हम इस शीर्षक तत्व के आकार, रंग को बदलने व इसके चारों ओर गद्दी करना चाहे तो हम यह इस तत्व का रूप बदलने के लिए सीएसएस का उपयोग करेंगे। वेब डिजाइनिंग के लिए CSS क्यों महत्वपूर्ण है इसका अंजाजा आप CSS के फायदे जानकर आसानी से कर सकते हैं।

सीएसएस की विशेषताएं (Features of CSS )

• समय की बचत– CSS एक properties को set करने के लिए बहुत flexibility प्रदान करता है। आप एक बार सीएसएस लिखने बाद उस same code को html element के कई समूहों पर लागू कर सकते है। यही नही बल्कि बाद में दूसरे web pages में भी इस code का पुनः उपयोग किया जा सकता है। कहने का तात्पर्य यह है आप css के उपयोग से अपने समय की बहुत बचत कर सकते है।
• Page के load time को कम करता है– सीएसएस इस्तेमाल करने का यह एक बड़ा फायदा है। CSS से pages को Design करने में बहुत कम codes की जरूरत पड़ती है। एक web page में कम codes का मतलब है, कि वह fast load होगा।
• Maintain करने में आसान– css के द्वारा किसी document को maintain करना काफी आसान है। सीएसएस में सिर्फ एक बदलाव से आप उस document के कई pages को तुरंत update कर सकते है।
• Bandwidth की बचत– एक high traffic website के लिए bandwidth काफी मायने रखती है। अगर आप page के layout के लिए table की जगह css का उपयोग करेंगे तो इससे उस file आकार में 50% तक कमी आयेगी।
• सभी device के लिए अनुकुल– सीएसएस के उपयोग से एक ही web page को multiple device compatibility दी जा सकती है। जिससे वह web page सभी डिवाइस computer, phones, print में उसके हिसाब से ही देखा जा सके।
• Search engine ranking में सुधार– एक website के लिये traffic ही सब कुछ है। लेकिन traffic तभी आयेगा जब उस वेबसाइट के page किसी search engines में पहले rank करेंगे। CSS के इस्तेमाल से search engines का उस वेबसाइट को access करना आसान हो जाता है। जिससे वह उस पेज को जल्दी access करके rank कर देता है।

[ Note: सीएसएस सीखने के लिए, आपको दो चीजों की आवश्यकता होती है: पहला टेक्स्ट एडिटर (Text Editor) और दूसरा वेब ब्राउज़र (Web Browser) होता है, टेक्स्ट-एडिटर जैसे नोटपैड या नोटपैड++ का उपयोग कर सकते हैं और वेब ब्राउज़र जैसे गूगल क्रोम, मोज़िला फ़ायरफ़ॉक्स  या इंटरनेट एक्सप्लोरर का उपयोग कर सीएसएस सीख सकते हैं।]