CSS क्या हैं? CSS का उपयोग कैसे करते है? CSS बनाने का तरीका क्या है ? जानिए CSS के बारें में विस्तार से। CSS से आप क्या समझते हैं? विस्तार पूर्वक व्याख्या के जरिये समझिये CSS को। What is CSS? Know CSS in Details in Hindi?
इसके पहले हमने आपको HTML के बारे में बताया था और HTML कोड किस तरीके से करते हैं यह भी बताया था। HTML में कोडिंग करने के लिए वैसे तो किसी और चीज की जरूरत नहीं पड़ती है लेकिन उसी HTML डिजाइन को और अच्छे से और आकर्षित बनाना हो तो उसके लिए हमें CSS का उपयोग करना पड़ता है।
CSS का काम डिजाइनिंग के लिए होता है जोकि कोई भी HTML वेबसाइट को एक सुंदर रूप प्रदान करता है। CSS का उपयोग करके HTML कोडिंग में बैकग्राउंड कलर से लेकर एनीमेशन इफेक्ट भी तैयार कर सकते हैं।
HTML में CSS 3 तरीके से दिया जाता है 1) Inline CSS के द्वारा 2) Internal Style Sheet के द्वारा 3) External Style Sheet। मतलब Inline CSS, Internal Style Sheet का उपयोग HTML कोडिंग के अंदर ही किया जाता है।
और तीसरे तरीके से CSS का एक अलग से फाइल बनाया जाता है जिस पर CSS की Coding रखी जाती है और उस CSS फाइल को HTML फाइल में Call किया जाता है।
CSS का पूरा नाम है Cascading Style Sheet. HTML के इस्तेमाल से Web page को एक आकार मिलता है और CSS के इस्तेमाल से Web page को एक नया और आकर्षक रूप मिलता है।
CSS का हिस्ट्री
CSS का अविष्कार 10 अक्टूबर 1994 को Håkon Wium Lie ने किया था। CSS को Maintain करने के लिए W3C के भीतर एक Group बनाया गया।
जिसका नाम CSS Working Group रखा गया। इस Group का काम Specification Document बनाना था। यही वह Group है, जो CSS को Update करता रहता है।
CSS को आप HTML की छोटी बहन मान सकते हैं। क्योंकि HTML के बाद ही CSS का भी जन्म होने लगा था। वैसे तो HTML और CSS के जन्म में कई सालों का अंतर हैं। लेकिन, उसी दशक में ही CSS का जन्म हो गया था।
CSS का जनक श्री Hakon Wium Lie हैं। इन्होने ही सबसे पहले 1994 में CSS Rules को बनाया था। और इसके बाद W3C – World Wide Web Consortium द्वारा CSS Level 1 को दिसबंर 1996 में प्रकाशित किया गया। यह CSS का पहला Version कहलाया।
CSS Version 1 से अब तक CSS के तीन और Versions को प्रकाशित किया जा चुका हैं। जो क्रमश: CSS Level 2, CSS Level 2.1 और CSS Level 3 हैं। CSS3 इसका नवीनतम (Latest Version) संस्करण हैं।
CSS का परिचय
CSS के पहले वेब डॉक्युमेंट्स बिना फॉर्मेटिंग के प्रकाशित किए जाते थे। यानि सिर्फ काले अक्षरों के ढेर के सिवा कुछ नही होता था।
जिन्हे पढ़ने का कतई मन नहीं करता था। इसी समस्या का समाधान ढूँढने के लिए HTML Style Tag का विकास हुआ। लेकिन, इससे बात नहीं बनी।
इसलिए, इसी स्टाइल टैग को आगे विकसित करते हुए एक अलग ही वेब डॉक्युमेंट्स की भाषा का निर्माण हुआ। जिसे हम CSS के नाम से जानते है।
दूसरी जरूरी बात अगर आप एक IT या Computer Science के Student है या Coding वगैरह में आपका दिमाग बहुत तेज दौड़ता है।
Theme, Apps, Website, Games ऐसी चीज़ें आप खुद बनाना चाहते है। तो भी CSS सीखना आपके लिए फायदेमंद होगा।
अब तीसरी सबसे जरूरी बात अगर आप CSS सीख कर एक Professional Web Designer बन गए तो आप दूसरे लोगो की Website Design करके एक अच्छी खासी Earning भी कर सकते है।
एक Web Designer भारत मे कम से कम 50000 income हर महीने लेता है। कहने का तात्पर्य यह कि इस छेत्र में Future Scope भी बहुत अच्छा है।
अब जब एक चीज़ सीखने के इतने फायदे है। तो चलिए बिना समय गवायें इसकी शुरुआत CSS क्या है यह जानने से करते है।
CSS की फुल फॉर्म क्या है?
CSS का फुल फॉर्म “Cascading Style Sheet” है। कैस्केडिंग स्टाइल शीट का उपयोग वेब पृष्ठों के लेआउट को स्टाइल करने के लिए किया जाता है।
उनका उपयोग टेक्स्ट कलर, फ़ॉन्ट और स्टाइल और वेब पृष्ठों के अन्य पहलुओं को डिजाईन करने के लिए किया जा सकता है। CSS वेब डेवलपर्स को वेबसाइट को सुंदर और आकर्षक बनाने में मदद करता है।
CSS क्या?
CSS वेब डॉक्युमेंट्स को स्टाइल करने की भाषा है, जिसे W3C – World Wide Web Consortium द्वारा विकसित किया गया है। इसका पहला संस्करण 1996 में प्रकाशित किया गया था।
CSS 3 इसका नवीनतम संस्करण है। इसका उपयोग एक वेबपेज को सजाने के लिए होता है। और HTML के साथ-साथ ही इस्तेमाल होती है।
आप जानते है कि HTML द्वारा वेब डॉक्युमेंट्स का ढ़ाँचा (Structure) तैयार किया जाता है। उस ढ़ाँचे को जिस तकनीक से सजाया यानि फॉर्मेट किया जाता है। उस तकनीक को ही CSS नाम दिया गया है।
CSS का उपयोग एक HTML डॉक्युमेंट के ढ़ाँचे की दिखावट (Layout), उसकी पृष्ठभूमी (Background), टेक्स्ट का रंग एवं स्टाइल आदि को सजाने एवं नियंत्रित करने के लिए किया जाता है।
इस भाषा को स्वतंत्र रुप से लिखा जाता है। इसके अपने Code-Words यानि स्टाइल रूल्स है, जो एक वेबपेज की अलग-अलग प्रकार से फॉर्मेटिंग करते है।
CSS एक वेब पेज को डायनामिक वेबपृष्ठ में बदलने का एक तरीका है। यह HTML (HTML) के लिए एक अतिरिक्त सुविधा प्रदान करता है। यह आम तौर पर वेब पेजों और उपयोगकर्ता इंटरफेस की स्टाइल बदलने के लिए HTML के साथ प्रयोग किया जाता है।
इसका उपयोग XML, SVG, और XUL सहित किसी भी प्रकार के एक्सएमएल डाक्यूमेंट्स (XML Documents) के साथ भी किया जा सकता है।
कई मोबाइल एप्लिकेशन (Mobile Applications) के लिए वेब अनुप्रयोगों (Web Applications) और उपयोगकर्ता इंटरफेस (User Interfaces) के लिए उपयोगकर्ता इंटरफेस बनाने के लिए अधिकांश वेबसाइटों में CSS का उपयोग HTML और जावास्क्रिप्ट के साथ किया जाता है।
यदि आप CSS सीखते हैं, तो आप एक अच्छी वेबसाइट स्टाइल कर सकते हैं तो मूल रूप से आप कह सकते हैं कि CSS हमारे वेबपृष्ठ पर मेक-अप के रूप में कार्य करता है।
यदि आप वेब डिज़ाइनिंग या वेब डेवलपमेंट में अपना कैरियर बनाना चाहते हैं तो आपको CSS का उपयोग आना अनिवार्य है। मुझे उम्मीद है कि अब आप HTML – CSS की कांसेप्ट को समझ चुके हैं।
CSS के प्रकार
1. Inline Style Sheet:-
इस Style Sheet की मदद से inline style को web pages में वही इस्तेमाल किया जाता है जहाँ इसकी जरूरत होती है।
Inline style sheet का उपयोग आप किसी particular html element को configure करने के लिए use कर सकते है।
Inline css आपको स्वतंत्रता प्रदान करता है किसी भी एक element को परिवर्तित करने की। इसकी खासियत यह है, कि जब हम किसी एक element को परिवर्तित करते है, तो इससे बाकी दूसरे elements में कोई बदलाव नही होता है।
<html>
<head>
<title>Inline CSS Demo</title>
</head>
<body style="background-color:red">
<p>This is inline CSS Demo</p>
</body>
</html>2. Embedded or Internal Style Sheet:-
इन style sheet का उपयोग pages के top (head section) में किया जाता है। Internal style sheet को <style> element के भीतर रखा जाता है।
इस type की style sheet का rule पेज के सभी element पर लागू होता है। जब हम style element उपयोग करते है, तो साथ मे इसमे type attribute भी इस्तेमाल होता है ।
यहां type attribute specify करता है कि document में किस प्रकार की style शामिल की जाये।
<html>
<head>
<title>Internal Style Demo</title>
<style>
body{
background-color:red;
}
</style>
</head>
<body>
<p>This is internal style sheet</p>
</body>
</html>3. External Style Sheet:-
यह CSS की सबसे Interesting Style Sheet है। इसमें हम एक separate file में CSS coding करके उसे “.css extension” के साथ save कर देते है।
अब जब भी हम <link> element की मदद से CSS file को html file से जोड़ते है तो पूरी html file पर इस css file का प्रभाव पड़ता है।
ऐसा इसलिए किया जाता है जब आप किसी website के design को एक – एक करके परिवर्तित करने के बजाय एक बार मे ही बदलना चाहे।
<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 स्टाइल के प्रकार
1. Inline Styles Sheet:-
नीचे दिए गए उदाहरण को देखें, बॉडी टैग में, स्टाइल एट्रिब्यूट डिफाइन की गई है। इसके बाद, स्टाइल एट्रिब्यूट में प्रॉपर्टी और वैल्यू डिफाइन किया गया है। इसे इनलाइन स्टाइल शीट कहा जाता है।
<html>
<head>
<title>Inline CSS Demo</title>
</head>
<body style="background-color:red">
<p>This is inline CSS Demo</p>
</body>
</html>
12. Internal Style Sheet:-
इंटरनल स्टाइल शीट में, आप टैग के अंदर स्टाइल्स को डिफाइन नहीं करते हैं। <Style> टैग को हेड सेक्शन में डिफाइन किया जाता है।
इसके बाद, सिलेक्टर्स (Selectors) का उपयोग करके, आप स्टाइल्स को डिफाइन करते हैं। इसमें HTML कोड और CSS कोड को एक ही डॉक्यूमेंट में डिफाइन किया जाता है।
<html>
<head>
<title>Internal Style Demo</title>
<style>
body{
background-color:red;
}
</style>
</head>
<body>
<p>This is internal style sheet</p>
</body>
</html>31. External Style Sheet:-
एक्सटर्नल स्टाइल शीट के संदर्भ में CSS किसी भी अन्य फाइल से लिंक होती है। वह फ़ाइल HTML फ़ाइल से <link> टैग से जुड़ी हुई होती है।
एक्सटर्नल स्टाइल शीट से आपको बार-बार CSS कोड लिखने की आवश्यकता नहीं होती है। आप एक ही CSS फ़ाइल को कई HTML फाइलों से लिंक कर सकते हैं। इसका एक उदाहरण नीचे दिया गया है।
<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 Animations and Transitions:- CSS में, आप एनीमेशन और ट्रांजीशन का उपयोग कर सकते और अपने वेब पेज को सुंदर और आकर्षक बना सकते हैं।
CSS Save Lots of Time:- CSS का सबसे बड़ी खासियत यह है कि CSS का उपयोग करके आप बहुत समय बचा सकते हैं। आपने यह भी देखा होगा कि वेबसाइट 2-3 पेज या 1000 पृष्ठों का है, प्रत्येक पृष्ठ देखने और डिजाइन में एक समान होती है और आप एक ही CSS फ़ाइल का उपयोग कई HTML पृष्ठों पर कर सकते हैं।
Pages Load Faster:- यदि आप CSS का उपयोग करते हैं, तो आपको HTML एलेमेंट्स को स्टाइल देने के लिए प्रत्येक टैग में एट्रिब्यूट लगाने की आवश्यकता नहीं है। यदि आप किसी भी HTML एलेमेंट्स को एक ही स्टाइल देना चाहते हैं, तो आप आसानी से उन्हें एक CSS फ़ाइल में एक साथ स्टाइल दे सकते हैं, इस प्रकार आपका HTML कोड कम हो जाता है और आपका वेब पेज तेजी से लोड हो जाता है।
Easy Maintenance:- जैसा कि हमने ऊपर पढ़ा है की आप एक ही स्टाइल शीट का उपयोग कई वेब पृष्ठों पर कर सकते हैं, इसलिए यदि आप कभी भी अपने सभी वेब पृष्ठों के डिज़ाइन को बदलना चाहते हैं, तो आपको उसी फ़ाइल में कुछ कोड लाइनों को अपडेट करना होगा और फिर आपकी पूरी वेबसाइट का डिजाईन स्वचालित रूप से अपडेट हो जाएंगे।
Multiple Device Compatibility:- आज मार्केट में, रेस्पोंसिव डिजाईन चल रहा है, यदि आपकी वेबसाइट रेस्पोंसिव नहीं है, तो उपयोगकर्ता के दृष्टिकोण में वेबसाइट सही नहीं है। CSS HTML दस्तावेज़ को एक से अधिक प्रकार के डिवाइस या मीडिया के लिए अनुकूलित करने की अनुमति भी दे सकता। CSS का उपयोग कर आप एक बहुत अच्छा रेस्पोंसिव डिज़ाइन बना सकते हैं, जो आपकी वेबसाइट को विभिन्न प्रकार के उपकरणों जैसे कि मोबाइल, टैबलेट, लैपटॉप, डेस्कटॉप, प्रिंटर इत्यादि के लिए विभिन्न स्टाइल में प्रस्तुत किया जा सकता है।
CSS का उपयोग
CSS वेब पेजों को डिजाईन करने के लिए एक स्टाइल शीट भाषा है, जिसमें रंग, लेआउट और फोंट शामिल हैं। यह वेब पेजों को विभिन्न प्रकार के उपकरणों, जैसे बड़ी स्क्रीन, छोटी स्क्रीन या प्रिंटर को अनुकूलित करने की अनुमति देता है। CSS HTML से स्वतंत्र है और किसी भी एक्सएमएल आधारित मार्कअप भाषा के साथ इस्तेमाल किया जा सकता है।
CSS Rule Syntax क्या हैं?
HTML तथा अन्य कम्प्युटर भाषाओं की तरह ही CSS Rule को भी लिखने का Syntax है। जिसके माध्यम से HTML Document के लिए CSS Declarations लिखि जाती हैं। नीचे CSS Syntax को दिखाया गया है।
CSS Rule Syntax:- CSS Syntax को Style Rule भी कहते है। Style Rule के मुख्य रूप से दो भाग होते है। आप इन्हे निचे Image में देख सकते है।
1. Selector :- एक Selector वह शब्द/शब्द समूह/अक्षर होता है जिसके लिए ‘Style Rule’ को लिखा जाता है। इसे ‘Curly Bracket’ के बाहर लिखा जाता है। यह आमतौर पर ‘HTML Tag’ ही होता है। लेकिन, इसे कोई भी नाम देकर लिखा जा सकता है। हाँ, आपने सही पढा कोई भी नाम लेकिन, आप यह आगे के Lessons में सीख पांएगें।
2. Declaration:- Declaration Style Rule का वह भाग होता हैं जिसमे किसी Selector के लिए Style की घोषणा की जाती हैं। इसके भी दो भाग होते हैं-
1. Property:- Property Style Rule का वह भाग है जो Style हम किसी ‘Selector’ पर लागु करना चाहते है। यह Curly Bracket के भीतर लिखी होती है। इसे HTML Tag का Attribute मान सकते है।
2. Value:- Style Rule का तीसरा भाग Value होता है। इसे भी Curly Bracket के भीतर लिखा जाता है। इसमे Property के लिए Value set की जाती है। Property Selector का “क्या” है वही Value को “कैसे” कहा जाता है।
उम्मीद हैं कि आपको CSS Rule समझ में आ गया होगा। अगर फिर भी आपको कोई शंका है तो हम एक उदाहरण द्वारा इसे समझा रहे हैं।
p {
color: red;
font-size: 16px;
}ऊपर के उदाहरण में हमने HTML Paragraph के लिए CSS Rule को Declare किया हैं। जिसमें p जो एक HTML Element होता हैं, यहाँ Selector है। इसके बाद Curley Bracket के भीतर Declaration लिखा गया हैं।
Declaration में सबसे पहले Property color दी गई हैं. और इस Property की Value red लिखि गई हैं। Property की Value को Colon (:) द्वारा अलग किया जाता हैं.
इसके बाद एक और Declaration लिखि गई हैं। जिसे Semicolon (;) द्वारा अलग किया जाता हैं. इस Declaration को भी p Selector के लिए ही लिखा गया हैं।
जिसमें Property font-size है, और इसकी Value 16 px Set की गई हैं। अब आपके Document में जितने भी P Element होंगे उन सब पर ये CSS Rule Apply होगा।
Note:- आप एक ही Style Rule में एक से ज्यादा Declarations लिख सकते हैं।
CSS के लाभ
- CSS बहुत समय बचाता है।
- यह लगातार और सहज परिवर्तन करने में मदद करता है।
- यह पृष्ठ की लोडिंग गति में सुधार करता है।
- CSS में पुन: स्थिति में आने की क्षमता है।
- इसमें बेहतर डिवाइस संगतता है।
CSS के नुकसान
- CSS का उपयोग करते समय क्रॉस-ब्राउज़र समस्याएं हो सकती हैं।
- CSS के कई स्तर हैं जैसे CSS, CSS 2, CSS 3. यह गैर-डेवलपर्स और शुरुआती लोगों के लिए भ्रम पैदा कर सकता है।
nice
wow