CSS (Cascading Style Sheets)
हेलो, आरएसएस कंप्यूटर सेंटर द्वारा लिखित एक आर्टिकल What is CSS Language. Full totorial in hindi by RSSCC में आपका स्वागत है CSS (Cascading Style Sheets) एक वेब डिज़ाइन भाषा है जिसका उपयोग HTML या XML दस्तावेज़ों की प्रस्तुति (presentation) को नियंत्रित करने के लिए किया जाता है। CSS का मुख्य उद्देश्य वेब पेजों के लुक और फील (appearance and feel) को बेहतर बनाना है। HTML केवल वेब पेज की संरचना (structure) को परिभाषित करता है, जबकि CSS वेब पेज के दृश्य भाग (visual aspects) जैसे रंग, आकार, फोंट, लेआउट आदि को निर्धारित करता है।
1. CSS का इतिहास
CSS का विकास 1994 में Håkon Wium Lie और Bert Bos द्वारा किया गया। इसका उद्देश्य HTML दस्तावेज़ों की शैली को एक दूसरे से अलग करना था, ताकि वेब पेजों का डिज़ाइन आसानी से बदला जा सके और वे अधिक संगठित बन सकें। CSS का पहला संस्करण 1996 में W3C (World Wide Web Consortium) द्वारा स्वीकृत किया गया। तब से लेकर अब तक CSS के कई संस्करण जारी किए गए हैं, जिनमें CSS1, CSS2, और CSS3 शामिल हैं।
2. CSS का कार्य
CSS का कार्य वेब पेज की प्रस्तुति को नियंत्रित करना है। HTML का उपयोग संरचना के लिए किया जाता है, जबकि CSS से यह निर्धारित होता है कि वेब पेज कैसे दिखेगा। CSS से हम निम्नलिखित कार्य कर सकते हैं:
- रंग (Colors): वेब पेज की पृष्ठभूमि, पाठ (text), और अन्य तत्वों के रंग को निर्धारित करना।
- फ़ॉन्ट (Fonts): फ़ॉन्ट का आकार, प्रकार, और शैली निर्धारित करना।
- मार्जिन और पैडिंग (Margin and Padding): तत्वों के बीच की दूरी को नियंत्रित करना।
- लेआउट (Layout): वेब पेज पर तत्वों की स्थिति और व्यवस्थितता।
- रूपरेखा (Borders): तत्वों के चारों ओर सीमाएँ (borders) जोड़ना।
- टेक्स्ट अलाइनमेंट (Text Alignment): टेक्स्ट को दाएँ, बाएँ या केंद्र में संरेखित करना।
3. CSS के प्रकार
CSS को तीन प्रमुख प्रकारों में वर्गीकृत किया जा सकता है:
1. इनलाइन CSS (Inline CSS): इसमें CSS को HTML तत्वों के भीतर सीधे style एट्रीब्यूट के रूप में लिखा जाता है। यह तरीका छोटे बदलावों के लिए उपयुक्त होता है, लेकिन बड़े और जटिल डिज़ाइन के लिए यह असुविधाजनक हो सकता है।
<head> सेक्शन में <style> टैग के भीतर लिखा जाता है। यह तरीका उस HTML पेज के लिए उपयुक्त होता है जिसमें केवल एक ही पेज पर CSS लागू किया जाना है। .css फ़ाइल में रखा जाता है और HTML दस्तावेज़ में <link> टैग के माध्यम से लिंक किया जाता है। यह तरीका बड़े प्रोजेक्ट्स के लिए सबसे अच्छा है, क्योंकि इसमें कई HTML पेजों पर समान CSS स्टाइल लागू किए जा सकते हैं।4. CSS के चयनकर्ता (Selectors)
CSS चयनकर्ता (selectors) का उपयोग HTML तत्वों को पहचानने और उन्हें स्टाइल देने के लिए किया जाता है। निम्नलिखित कुछ प्रमुख चयनकर्ता हैं:
साधारण चयनकर्ता (Simple Selector): यह HTML टैग या तत्व का चयन करता है। जैसे:
p {
color: red;
}
Read Also
यह सभी तत्वों का रंग लाल कर देगा
कक्षा चयनकर्ता (Class Selector): यह उस HTML तत्व का चयन करता है, जिसमें विशेष कक्षा (class) नाम होता है। कक्षा चयनकर्ता का उपयोग . से होता है। जैसे:
.important {
font-weight: bold;
}
#header {
background-color: blue;
}
संतान चयनकर्ता (Descendant Selector): यह किसी विशेष तत्व के भीतर के तत्वों को चयनित करता है। जैसे:
div p {
color: green;
}
5. CSS में लेआउट (Layout)
CSS का एक प्रमुख कार्य लेआउट बनाना है। इसमें हम विभिन्न तत्वों की स्थिति (position) और उनके आकार (size) को नियंत्रित करते हैं। CSS में निम्नलिखित प्रमुख लेआउट तकनीकें होती हैं:
- ब्लॉक और इनलाइन तत्व (Block and Inline Elements): ब्लॉक तत्व पूरे पंक्ति को घेर लेते हैं (जैसे <div>, <p>), जबकि इनलाइन तत्व केवल जितनी जगह आवश्यक होती है, उतनी ही जगह घेरते हैं (जैसे <span>, <a>).
- फ्लेक्सबॉक्स (Flexbox): यह एक आधुनिक लेआउट तकनीक है, जो तत्वों को लाइन में व्यवस्थित करने और उनके आकार को नियंत्रित करने के लिए उपयोग की जाती है।
.container {
display: flex;
}
.item {
margin: 10px;
}
- ग्रिड (Grid): CSS ग्रिड लेआउट भी एक शक्तिशाली तकनीक है, जो दो-आयामी लेआउट बनाने के लिए उपयुक्त है। इसमें हम कॉलम और रो (rows and columns) का उपयोग करके तत्वों को व्यवस्थित करते हैं।
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
margin: 10px;
}
6. CSS के फायदे
- प्रस्तुति में सुधार: CSS के माध्यम से हम वेब पेजों को आकर्षक बना सकते हैं और उनकी प्रस्तुति को बेहतर कर सकते हैं।
- रख-रखाव में आसानी: एक बार CSS फाइल लिखने के बाद, उसे विभिन्न HTML पेजों में लागू किया जा सकता है, जिससे समय और प्रयास की बचत होती है।
- सामान्य डिजाइन: CSS से हम सभी पृष्ठों पर समान डिज़ाइन लागू कर सकते हैं, जिससे वेबसाइट का रूप और संरचना समान रहती है।
CSS के और भी महत्वपूर्ण पहलू
CSS (Cascading Style Sheets) की कुछ अतिरिक्त महत्वपूर्ण विशेषताएँ और उपयोग हैं जिन्हें हर वेब डेवलपर को समझना चाहिए:
1. CSS के सिद्धांत और कार्यविधि
CSS का नाम "Cascading" इसलिए पड़ा क्योंकि इसके नियमों का पालन करते हुए, एक ही तत्व पर कई विभिन्न स्टाइल लागू किए जा सकते हैं, और उनका चयन किस प्रकार किया जाएगा, यह निर्धारित करना आवश्यक होता है। CSS को लागू करते समय कुछ विशेष सिद्धांतों का पालन किया जाता है:
- Specificity: जब एक ही तत्व पर कई स्टाइल लागू होते हैं, तो CSS चयनकर्ता की विशेषता (specificity) यह निर्धारित करती है कि कौन सा नियम लागू होगा। उदाहरण के लिए, यदि एक तत्व पर कक्षा (class) और आईडी (id) दोनों का स्टाइल लागू हो, तो आईडी चयनकर्ता का नियम प्राथमिक होगा।
- Cascading: यह सिद्धांत यह सुनिश्चित करता है कि अगर एक तत्व पर कई स्टाइल्स लागू होते हैं, तो सबसे अंतिम लागू किया गया स्टाइल सबसे महत्वपूर्ण होता है। अर्थात, अगर एक ही तत्व पर बाहरी, आंतरिक, और इनलाइन CSS लागू किया गया हो, तो इनलाइन CSS सबसे प्रभावी होगा।
- Inheritance: CSS में कुछ गुण (properties) अपने पैरेंट तत्व से अपने चाइल्ड तत्वों में विरासत में मिलते हैं। जैसे, यदि आप
bodyटैग का रंग सेट करते हैं, तो इसका प्रभाव सभी टैग्स पर पड़ता है, जोbodyके भीतर होते हैं, जैसे कि पैराग्राफ, हेडिंग्स, और अन्य HTML टैग्स।
2. CSS के विभिन्न पहलु
CSS केवल एक वेब पेज के स्टाइलिंग के लिए नहीं होता, बल्कि यह वेब पेज के इंटरेक्टिव और आकर्षक बनाने के लिए कई और पहलुओं का ध्यान रखता है। हम CSS के कुछ महत्वपूर्ण पहलुओं को और विस्तार से देख सकते हैं:
-
मीडिया क्वेरीज (Media Queries): यह CSS की एक विशेषता है जो वेबसाइट को मोबाइल, टैबलेट, डेस्कटॉप आदि विभिन्न उपकरणों पर प्रतिक्रियाशील (responsive) बनाती है। मीडिया क्वेरीज का उपयोग करके हम यह निर्धारित कर सकते हैं कि एक तत्व कैसे प्रदर्शित होगा, जब स्क्रीन का आकार छोटा या बड़ा हो।
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
.container तत्व की दिशा (direction) को स्तंभ (column) में बदल दिया जाएगा।- एनिमेशन और ट्रांसफॉर्मेशन (Animations and Transformations): CSS3 में एनिमेशन और ट्रांसफॉर्मेशन जैसी सुविधाएँ जोड़ी गईं, जो एक वेब पेज को और अधिक गतिशील और आकर्षक बनाती हैं। ट्रांसफॉर्मेशन का उपयोग तत्वों को स्केल, रोटेट, या ट्रांसलेट (move) करने के लिए किया जाता है, जबकि एनिमेशन का उपयोग किसी तत्व में गतिशीलता या प्रभाव जोड़ने के लिए किया जाता है।
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-in {
animation: slide 1s ease-out;
}slide-in क्लास का उपयोग किया गया है, जो किसी तत्व को बाएं से दाएं घिसकते हुए लाएगा।
- ग्रेडिएंट्स (Gradients): CSS में ग्रेडिएंट्स का उपयोग दो या दो से अधिक रंगों के बीच плавी (smooth) परिवर्तन के लिए किया जाता है। यह पृष्ठभूमि (background) को बहुत आकर्षक बना सकता है।
background: linear-gradient(to right, red, yellow);
इस उदाहरण में, बैकग्राउंड में एक रंग का हल्का बदलाव होगा, जो लाल से पीले में जाएगा।
3. CSS की सामान्य प्रॉपर्टीज़
CSS में कई प्रकार की प्रॉपर्टीज़ होती हैं, जो तत्वों के डिजाइन को नियंत्रित करती हैं। हम कुछ प्रमुख CSS प्रॉपर्टीज़ पर चर्चा करेंगे:
(i) Background: किसी तत्व की पृष्ठभूमि को निर्धारित करना। इसमें रंग, चित्र, या ग्रेडिएंट्स शामिल हो सकते हैं।
background-color: #f0f0f0;
background-image: url('background.jpg');width: 300px;
padding: 20px;
border: 1px solid #000;
margin: 15px;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
display: block;
4. CSS के विकास में बदलाव
5. CSS का उपयोग और प्रभाव
निष्कर्ष
CSS एक शक्तिशाली भाषा है जो वेब डिजाइन और डेवलपमेंट में महत्वपूर्ण भूमिका निभाती है। यह HTML की संरचना को आकर्षक रूप से प्रस्तुत करने के लिए आवश्यक है। CSS के माध्यम से हम अपनी वेबसाइटों को न केवल आकर्षक बना सकते हैं, बल्कि उन्हें अधिक उपयोगकर्ता-अनुकूल और प्रतिक्रियाशील (responsive) भी बना सकते हैं।
📢 यह जानकारी RSS COMPUTER CENTER द्वारा प्रकाशित की गई है। और अपडेट के लिए जुड़े रहें!
