CSS की फुल फ्रॉम क्या है? :- Cascading Style Sheet ( “कैस्केडिंग स्टाइल शीट्स” ) यह HTML तत्वों को स्क्रीन पर कैसे प्रदशित करना है और किस प्रकार प्रदशित करना है ,इसे 1996 में W3C ( वर्ल्ड वाइड वेब कंसोर्टियम ) द्वारा विकसित किया गया था| कैस्केडिंग शब्द का तात्पर्य इस तथ्य से है आप एक ही वेब पेज पर कई स्टाइल शीट लागु कर सकते है |
सीएसएस बताता है कि HTML तत्वों को स्क्रीन, कागज या अन्य मीडिया में कैसे प्रदर्शित किया जाना है सीएसएस बहुत सारा काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है
बाहरी स्टाइलशीट CSS फ़ाइलों में संग्रहीत की जाती हैं |
इसे फाइल्स को save (सहजने ) करने के लिए भी काम में लिया जाता है यह सभी ब्राउज़रों द्वारा समर्थित है और मुख्य रूप से दस्तावेज़ सामग्री को दस्तावेज़ प्रस्तुति से अलग करने के लिए डिज़ाइन किया गया है। डिज़ाइनरों के लिए डिज़ाइन बदलने और वेब पेजों पर नियंत्रण करने के लिए यह एक शक्तिशाली उपकरण साबित हो रहा हैं |
Advantage of CSS ( CSS के फायदे )
- समय बचाता है: CSS आपको प्रत्येक HTML तत्व के लिए एक शैली परिभाषित करने की अनुमति देता है। जिससे आप इस शैली को जितने चाहें उतने वेब पेजों पर लागू कर सकते हैं। इससे आपका बहुत सा समय बच जाता है,और बहुत ही कम समय में आप अपना काम पूरा कर लेते है
- आसान रखरखाव: आप दस्तावेज़ फ़ॉर्मेटिंग को आसानी से अपडेट कर सकते हैं और इससे आप कई दस्तावेज़ों में एकरूपता बनाए रख सकते हैं। जिससे आपको इसे ढूंढने में ज्यादा समय नहीं लगेगा
- तेज़ पेज लोडिंग: यह कई पेजों को फ़ॉर्मेटिंग साझा करने की अनुमति देता है जो फ़ाइल स्थानांतरण आकार को कम करता है, जिससे पेजों को तेज़ी से लोड होने में मदद मिलती है। जिससे यह कम समय में पजो को लोड कर लेता है
- प्लेटफ़ॉर्म स्वतंत्रता: यह प्लेटफ़ॉर्म स्वतंत्रता प्रदान करता है और नवीनतम ब्राउज़रों का भी समर्थन करता है।
- एकाधिक डिवाइस संगतता: यह आपको एक से अधिक प्रकार के डिवाइस के लिए सामग्री को अनुकूलित करने की अनुमति देता है। आप कंप्यूटर, सेल फोन और प्रिंटर जैसे विभिन्न उपकरणों के लिए विभिन्न देखने की शैलियों में एक HTML दस्तावेज़ प्रस्तुत कर सकते हैं।
- HTML से बेहतर शैलियाँ: इसमें HTML की तुलना में अधिक प्रस्तुति क्षमताएँ हैं। यह आपको HTML प्रस्तुतिकरण तत्वों और विशेषताओं का उपयोग करने की तुलना में अपने HTML पृष्ठों के स्वरूप को बेहतर ढंग से बढ़ाने की अनुमति देता है।
Types of CSS Selectors
- Universal Salectors सबसे पहला CSS चयनकर्ता जिस पर हम चर्चा करेंगे यह HTML पेज पर मौजूद सभी HTML तत्वों का चयन करता है। सार्वभौमिक चयनकर्ता का उपयोग करने के लिए, हमें तारांकन (*) का उपयोग करना होगा और फिर CSS संपत्ति को परिभाषित करना होगा और उसके बाद, सभी तत्वों का चयन किया जाएगा। सीएसएस यूनिवर्सल चयनकर्ता का उपयोग करने के साथ साथ , अन्य तत्वों के अंदर HTML तत्वों का भी चयन किया जाएगा
Example:- तारांकन चिह्न (*) का उपयोग करेंगे और इसके अंदर सीएसएस गुणों के एक सेट को परिभाषित करेंगे। हम सीएसएस गुणों का एक सेट लिखेंगे और तारांकन चिह्न के बिना आउटपुट देखेंगे और उसके बाद, हम तारांकन चिह्न लागू करेंगे और देखेंगे कि वेबपेज (आउटपुट) में प्रत्येक तत्व में वही सीएसएस होगा जिसे हमने परिभाषित किया है।
Read Also:- Best commerce coaching classes in Bhilwara – B-TAG Commerce Coaching 2023
2. Type Selectors:- एक प्रकार Seletors को तत्व चयनकर्ता के रूप में भी जाना जाता है क्योंकि यह आपके दस्तावेज़ में HTML टैग/तत्वों का चयन करता है। Type Selectors
HTML तत्वों को उनके नाम के आधार पर चुनता है, उनमें से कुछ हैं p (पैराग्राफ टैग), h1 (शीर्षक 1), div (डिवीजन टैग), स्पैन, आदि। एक प्रकार के चयनकर्ता का उपयोग करने के लिए, आपको बस HTML टैग का नाम देना होगा और फिर घुंघराले ब्रेसिज़ में CSS गुणों को परिभाषित करना होगा
element_name{
//css properties
}
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
color: red;
background-color:pink;
}
h2{
text-align: right;
color: black;
background-color:red;
}
h3,div{
text-align: left;
color: red;
background-color:yellow;
}
</style>
</head>
<body>
<h1 class="center">This element is selected because it is h1</h1>
<p>This element is not selected</p>
<h2>This element is selected because it is h2</h2>
<h3>This element is selected because it is h3</h3>
<div>This element is selected because it is div and will have the same property as h3</div>
</body>
</html>
3. Class selectors:- हम आम तौर पर HTML तत्वों को समूहीकृत करने और उन पर अद्वितीय स्टाइल लागू करने के लिए क्लास का उपयोग करते हैं। सीएसएस में वर्ग चयनकर्ता उन तत्वों का चयन करता है जो एक विशेष वर्ग विशेषता से संबंधित होते हैं। किसी विशिष्ट वर्ग वाले तत्वों का चयन करने के लिए, एक अवधि या पूर्ण विराम (.) वर्ण लिखें, और फिर वर्ग का नाम लिखें। उदाहरण के लिए, यदि div और h2 का वर्ग समान है, तो “चिह्नित करें” कहें। इसलिए, हम उन तक पहुंच सकते हैं और केवल वर्ग के नाम, यानी “मार्क” का उपयोग करके समान स्टाइल लागू कर सकते हैं।
4.ID Selectors:- CSS ID Selectors किसी पृष्ठ पर तत्वों का चयन करने और उस पर सीएसएस गुण लागू करने के लिए HTML तत्व की आईडी विशेषता का उपयोग करता है। आईडी विशेषता HTML दस्तावेज़ में अद्वितीय पहचानकर्ता है सीएसएस में का ID Selectors उपयोग करने के लिए, HTML तत्व की आईडी के नाम के बाद हैशटैग (#) का उपयोग करें। HTML तत्व का चयन केवल तभी किया जाएगा जब उसकी आईडी विशेषता चयनकर्ता में दिए गए मान से बिल्कुल मेल खाती हो |
यदि एक आईडी चयनकर्ता को अन्य या अधिक चयनकर्ताओं के साथ जोड़ा जाता है, तो आईडी चयनकर्ताओं के पहले # लगाना होगा।
5. Attribute Selectors:- HTML तत्वों में एक या अधिक विशेषताएँ हो सकती हैं, और इनमें से किसी एक विशेषता का उपयोग HTML तत्वों को लक्षित करने और चयन करने के लिए किया जा सकता है, यदि वे विशेषता का चयन करते समय उल्लिखित शर्त से मेल खाते हैं तो उनका चयन किया जाता है, और विशेषता का चयन करने के बाद विभिन्न सीएसएस गुणों को लागू किया जा सकता है। सीएसएस विशेषता चयनकर्ता दिए गए गुण के अस्तित्व या दिए गए गुण के मूल्य के आधार पर तत्वों का चयन करता है। किसी विशेषता को चुनने की विभिन्न विधियाँ हैं,
सीएसएस [विशेषता] चयनकर्ता इस प्रकार के विशेषता चयनकर्ता में, तत्व का नाम उपयोग किया जाता है और फिर वर्ग कोष्ठक में विशेषता का नाम निर्दिष्ट किया जाता है। वर्गाकार ब्रैकेट में निर्दिष्ट विशेषता के नाम से मेल खाने वाले तत्वों का चयन किया जाता है और सीएसएस गुण उन पर लागू किए जाते हैं।
Conclusion
उम्मीद है आपने हमारा यह कंटेंट पढ़ लिया होगा जिसमे हमने Cascading Style Sheet ( “कैस्केडिंग स्टाइल शीट्स” ) के बारे में पूरी जानकारी दी है यदि आपको इस वेबसाइट से संबंधित कोई जानकारी जाननी हो या कुछ क्वेश्चन पूछना हो तो आप निचे कमेंट बॉक्स में कमेंट करके अपना सवाल पूछ सकते हो |
Jhujhar Singh Bhati is the founder and lead trainer at B-TAG Coaching Classes in Bhilwara, Rajasthan. With years of experience in the education sector, Jhujhar is passionate about empowering students and professionals through top-quality training in IT, accounting, and academics. His personalized approach to teaching and commitment to excellence have transformed the lives of many students, helping them achieve their academic and career goals. Dedicated to continuous learning and innovation, Jhujhar aims to create a nurturing environment where every learner can thrive and succeed.