कैस्केडिंग स्टाइल शीट्स का परिचय (सीएसएस)

संक्षिप्त नाम सीएसएस "कैस्केडिंग स्टाइल शीट्स" के लिए है। CSS का उपयोग वेबसाइटों और सभी उपकरणों पर उपयोग किए जाने वाले एप्लिकेशन को स्टाइल करने के लिए किया जाता है। स्टाइल शीट का उपयोग आमतौर पर HTML और जावास्क्रिप्ट जैसी फ्रंट-एंड प्रोग्रामिंग भाषा के साथ किया जाता है।

CSS को तीन तरीकों में से एक में लागू किया जा सकता है- इनलाइन, आंतरिक या बाह्य रूप से। हालांकि बाहरी सीएसएस अनुशंसित दृष्टिकोण है, ऐसे उदाहरण हैं जब कार्यान्वयन के दो शेष तरीके अधिक व्यावहारिक हो सकते हैं।

इस ट्यूटोरियल लेख में, आप आज ही एप्लिकेशन बनाना शुरू करने के लिए CSS की सभी मूल बातें सीखेंगे।

विभिन्न सीएसएस कार्यान्वयन विधियों का उपयोग कब करें

इनलाइन सीएसएस कार्यान्वयन का आदर्श तरीका है जब कुछ अन्य विशिष्ट मामलों के साथ वेब पेज पर केवल एक या दो स्टाइलिंग प्राथमिकताएं शामिल करने का इरादा है। इनलाइन सीएसएस विधि एक विशिष्ट परिणाम प्राप्त करने के लिए सीएसएस संपत्ति के साथ स्टाइल कीवर्ड का उपयोग करती है

यदि आप किसी एकल शीर्षक का रंग बदलकर लाल करना चाहते हैं, तो इनलाइन CSS एक अच्छा विकल्प हो सकता है। एक आला मामला, जैसा कि ऊपर उल्लेख किया गया है, मुख्य रूप से तालिकाओं (एक पुरानी प्रथा) से युक्त HTML लेआउट बनाते समय होगा।

इनलाइन सीएसएस उदाहरण का उपयोग करना

 <h1 style="color: red;">Main Heading</h1>

उपरोक्त कोड की पंक्ति लाल रंग में लेपित "मुख्य शीर्षक" टेक्स्ट प्रदर्शित करेगी। इनलाइन सीएसएस का उपयोग करने के लिए यह संभवतः एकमात्र व्यावहारिक कारणों में से एक है क्योंकि किसी दिए गए वेब पेज पर आमतौर पर केवल एक एच 1 तत्व होता है।

यदि आप वेब पेज पर सभी h2 तत्वों को पीले रंग से कोट करना चाहते हैं। आपको प्रत्येक तत्व पर रंग संपत्ति और उसके मूल्य (पीला) के साथ सीएसएस शैली कीवर्ड का उपयोग करना होगा। हालांकि, इस कार्य को पूरा करने का एक अधिक कुशल तरीका आंतरिक सीएसएस का उपयोग करना है।

आंतरिक सीएसएस उदाहरण का उपयोग करना

 <style>
h2{
color: yellow;
}
</style>

उपरोक्त कोड को अपनी HTML फ़ाइल के <head> टैग में रखने से यह सुनिश्चित हो जाएगा कि उस फ़ाइल के सभी h2 तत्व पीले रंग में लेपित हैं। आंतरिक सीएसएस को एचटीएमएल कोड से अलग किया जाता है, और यह विधि को और अधिक कुशल बनाता है क्योंकि यह विभिन्न तत्व समूहों को लक्षित करने की सुविधा प्रदान करता है।

तो बाहरी सीएसएस कार्यान्वयन विधि अभी भी सबसे अनुशंसित दृष्टिकोण क्यों है? चिंताओ का विभाजन। बाहरी सीएसएस के साथ, आपका सीएसएस कोड आपके एचटीएमएल कोड से पूरी तरह से अलग है, जो बड़ी परियोजनाओं के लिए मापनीयता सुनिश्चित करता है और परीक्षण प्रक्रिया को और अधिक कुशल बनाता है।

बाहरी सीएसएस उदाहरण का उपयोग करना

 
<link rel="stylesheet" href="css_file_name">

अपनी HTML फ़ाइल के <head> टैग में उपरोक्त कोड की लाइन डालने से बाहरी CSS पद्धति का उपयोग करके आपके वेब पेज को स्टाइल करने में आसानी होगी। ऊपर दिए गए कोड का एकमात्र पहलू जो बदलेगा वह है href प्रॉपर्टी को असाइन किया गया मान, जो हमेशा CSS फ़ाइल (.css एक्सटेंशन सहित) का नाम होना चाहिए।

संबंधित: कैस्केडिंग स्टाइल शीट क्या हैं और सीएसएस का उपयोग किस लिए किया जाता है? आपकी CSS फ़ाइल आपके HTML दस्तावेज़ से जुड़ी हुई है, अब आप अपनी CSS फ़ाइल में CSS कोड लिखना शुरू कर सकते हैं। इस बिंदु पर, उपरोक्त आंतरिक CSS उदाहरण और बाहरी CSS के बीच एकमात्र अंतर शैली टैग है। इसलिए, एक सीएसएस फ़ाइल में निम्नलिखित कोड डालने से उपरोक्त आंतरिक सीएसएस उदाहरण के समान परिणाम उत्पन्न होंगे।

 h2{
color: yellow;
}

सीएसएस मूल संरचना की खोज

मूल सीएसएस घोषणा में सात आवश्यक तत्व हैं, जैसा कि आप नीचे दिए गए उदाहरण से देख सकते हैं। स्टाइलिंग वरीयताओं के एक विशिष्ट सेट को प्राप्त करने के लिए वे सभी एक साथ काम करते हैं।

चयनकर्ता

CSS घोषणा में, एक चयनकर्ता या तो एक id , एक वर्ग , एक तत्व, या कुछ विशेष उदाहरणों में, एक छद्म चयनकर्ता हो सकता है। CSS संरचना में a तत्व के ऊपर एक चयनकर्ता के रूप में उपयोग किया जाता है, जिसका अर्थ है कि वेब पेज पर सभी लिंक लाल रंग में लेपित होंगे। अनिवार्य रूप से, चयनकर्ता का उद्देश्य उन तत्वों की पहचान करना है जिन्हें स्टाइल किया जाना चाहिए।

घोषणा प्रारंभ और समाप्ति

घोषणा की शुरुआत और समाप्ति महत्वपूर्ण हैं क्योंकि वे सभी स्टाइल वरीयताओं को संलग्न करते हैं जो एक विशिष्ट चयनकर्ता पर लागू होती हैं। दोनों तत्वों को खुले और बंद घुंघराले ब्रेसिज़ की एक जोड़ी द्वारा दर्शाया गया है। डिक्लेरेशन स्टार्ट या डिक्लेरेशन एंड का उपयोग करने के लिए याद रखने का एक अच्छा तरीका यह याद रखना है कि यदि आपके पास एक ओपन कर्ली ब्रेस है, तो एक संबंधित क्लोज्ड कर्ली ब्रेस होना चाहिए, और इसके विपरीत।

संपत्ति

एक घोषणा संरचना में सीएसएस संपत्ति सौ से अधिक विभिन्न प्रकार की संपत्ति में से एक हो सकती है। उपरोक्त सीएसएस संरचना में प्रयुक्त संपत्ति प्रकार रंग है और यह संपत्ति वेब पेज पर टेक्स्ट को लक्षित करती है। यदि आप अधिक जानना चाहते हैं, तो CSS गुणों और उनके उपयोग की हमारी विस्तृत सूची देखें।

संपत्ति/मूल्य विभाजक

हालांकि यह छोटा और महत्वहीन लग सकता है, संपत्ति/मूल्य विभाजक सीएसएस संरचना में अन्य सभी तत्वों की तरह ही महत्वपूर्ण है। यदि कभी ऐसा कोई उदाहरण होता है जहां इस तत्व को भुला दिया जाता है, तो संपूर्ण CSS घोषणा निष्पादित नहीं होगी।

महत्व

CSS गुण मान उस सटीक शैली का प्रतिनिधित्व करता है जिसे आप किसी दिए गए गुण पर लागू करना चाहते हैं। उपयोग के लिए उपलब्ध मान संपत्ति के प्रकार पर निर्भर हैं। उदाहरण के लिए, उपरोक्त संरचना में उपयोग की जाने वाली संपत्ति रंग है , जिसका अर्थ है कि इस संपत्ति पर केवल एक ही प्रकार का मूल्य लागू किया जा सकता है, एक रंग का नाम। एक रंग मान चार रूपों में से एक में प्रस्तुत किया जा सकता है: एक शब्द मान (जैसे ऊपर के उदाहरण में), एक हेक्साडेसिमल मान, एक एचएसएल (ह्यू, संतृप्ति, हल्कापन) मान, या एक आरजीबी (लाल, हरा, नीला) मान।

घोषणा विभाजक

घोषणा विभाजक इंगित करता है कि आप एक विशिष्ट स्टाइल घोषणा के अंत में हैं। उपरोक्त संरचना में केवल एक घोषणा विभाजक है, लेकिन और भी हो सकता है। यह सब उस सीएसएस गुणों की संख्या पर निर्भर करता है जिसे आप किसी विशिष्ट वर्ग , id , या तत्व पर उपयोग करना चाहते हैं।

आईडी और कक्षाएं क्या हैं?

सीएसएस स्टाइलिंग प्रक्रिया में आईडी और कक्षाएं एक मौलिक भूमिका निभाती हैं। एचटीएमएल तत्वों की तरह, सीएसएस आईडी और कक्षाओं को सीएसएस घोषणा में चयनकर्ताओं के रूप में उपयोग किया जाता है। हालाँकि, कक्षाएं और आईडी एक HTML तत्व पर पूर्वता लेते हैं।

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

हालाँकि, यदि इस h2 तत्व में एक id है जिसका उपयोग CSS घोषणा में चयनकर्ता के रूप में किया जाता है, भले ही उसकी स्थिति (पहले या बाद में) एक CSS घोषणा के लिए जिसमें h2 तत्व इसके चयनकर्ता के रूप में हो, id घोषणा में स्टाइल वरीयता हमेशा रहेगी तत्व पर वरीयता प्राप्त करें। संक्षेप में, एक आईडी अन्य शैली चयनकर्ताओं को ओवरराइड कर देगी।

यह याद रखना महत्वपूर्ण है कि सीएसएस घोषणा में, आईडी एक संख्या चिह्न से शुरू होती है और कक्षाएं पूर्ण विराम से शुरू होती हैं। एक आईडी और एक वर्ग के बीच सबसे महत्वपूर्ण अंतर यह है कि एक आईडी अद्वितीय है, जबकि एक वर्ग को दोहराया जा सकता है। उदाहरण के लिए, समान <div> टैग के संग्रह को समान वर्ग नाम दिया जा सकता है; हालांकि, प्रत्येक <div> टैग की आईडी अद्वितीय होनी चाहिए।

विभिन्न प्रकार के चयनकर्ताओं की खोज

तीन बुनियादी प्रकार के चयनकर्ता हैं- सिंगल, मल्टीपल और नेस्टेड। अब तक, इस लेख में एकल चयनकर्ताओं को व्यापक रूप से शामिल किया गया है।

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

मूल HTML टेम्पलेट उदाहरण

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contianer">
<div class="siteInfor" id="Welcome">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>

<div class="siteInfor" id="About">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>

<div class="content" id="article-1">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
</p>
</div>

<div class="content" id="article-2">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
</p>
</div>

</div>

</body>
</html>

यदि आप ऊपर दी गई HTML फ़ाइल को करीब से देखते हैं, तो आप id और कक्षाओं के बीच मौजूद डायनामिक देखेंगे। उपरोक्त फ़ाइल के संदर्भ में, यदि आप उसी शैली को केवल वेब पेज के बारे में अनुभाग और लेखों पर लागू करना चाहते हैं, तो निम्न सीएसएस कोड इसे पूरा करेगा।

एकाधिक चयनकर्ताओं का उपयोग करना उदाहरण

 
#About, .content{
color: white;
background-color: darkcyan;
}

एकाधिक चयनकर्ताओं का उपयोग करते समय, आपको हमेशा प्रत्येक चयनकर्ता को अल्पविराम का उपयोग करके अलग करना चाहिए। ऊपर दिए गए उदाहरण में दो चयनकर्ता हैं, एक आईडी और एक वर्ग । अल्पविराम उस के बारे में आईडी इस प्रकार याद आ रही है, तो सीएसएस घोषणा पर अमल नहीं होंगे।

ऊपर दिए गए मूल HTML टेम्पलेट उदाहरण पर वापस जाने पर, दो <span> टैग मौजूद हैं—एक स्वागत अनुभाग में और दूसरा इसके बारे में अनुभाग में। यदि आपका लक्ष्य इनमें से केवल एक <span> टैग को लक्षित करना है, तो एक नेस्टेड चयनकर्ता आपकी गो-टू विधि होनी चाहिए।

नेस्टेड चयनकर्ताओं का उपयोग करना उदाहरण

 #Welcome p span{
color: red;
}

ऊपर नेस्टेड चयनकर्ता में एक आईडी और दो HTML तत्व होते हैं। जैसा कि आप ऊपर दिए गए उदाहरण से देख सकते हैं, एक नेस्टेड चयनकर्ता आपको समूह के भीतर एक विशिष्ट तत्व को लक्षित करने की क्षमता प्रदान करता है।

इसलिए, स्वागत आईडी वाले डिव के <p> टैग में केवल स्पैन सेक्शन को लाल रंग में कोट किया जाएगा।

CSS में कमेंट कैसे लिखें

चाहे आप CSS जैसी स्टाइलिंग भाषा का उपयोग कर रहे हों या प्रोग्रामिंग भाषा का, आपको पूरी तरह से पता होना चाहिए कि टिप्पणी कैसे लिखी जाती है। एंटरप्राइज़-स्तरीय परियोजनाओं में टिप्पणियाँ आवश्यक हैं जहाँ कई डेवलपर एक साथ काम करते हैं, और यह छोटे पैमाने पर विकास करते समय भी उपयोगी होता है।

एक सीएसएस टिप्पणी में दो फॉरवर्ड स्लैश, दो तारांकन और एक टिप्पणी अनुभाग होता है।

सीएसएस सिंगल लाइन टिप्पणी उदाहरण

 /* This is how you write a single line comment in CSS */

CSS मल्टीपल लाइन्स कमेंट उदाहरण

 
/*
This is how you write
a multi-line comment
in CSS
*/

आगे क्या होगा?

यह लेख आपको CSS के मूलभूत घटक प्रदान करता है। अब आप एक पहचान का उपयोग कर सकते हैं:

  • तीन CSS कार्यान्वयन विधियों में से कोई एक
  • CSS घोषणा में सभी तत्व
  • तीन बुनियादी प्रकार के चयनकर्ता
  • एक सीएसएस टिप्पणी

फिर भी, यह अभी शुरुआत है। सीएसएस में कई ढांचे हैं जो आपको भाषा की बेहतर समझ विकसित करने में मदद करेंगे। एकमात्र चुनौती यह तय करना है कि कौन सा आपके लिए सबसे अच्छा है।