CSS का परिचय
CSS का परिचय
CSS का परिचय, CoddyKit पर HTML for Kids का एक निःशुल्क पाठ है। यह 1 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह HTML for Kids सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML for Kids पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
परिचय 1
नमस्कार,
पिछले अध्याय में हमने सीखा कि CSS क्या है और हमें इसका उपयोग क्यों करना चाहिए। अब मैं एक सरल उदाहरण के साथ संक्षिप्त परिचय देना चाहता हूँ।
आइए एक सरल HTML पृष्ठ परिभाषित करते हैं।
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>इनलाइन शैली
अब हम अपने Hello CSS शीर्षक का रंग लाल करना चाहते हैं। इसके लिए हम style एट्रिब्यूट का उपयोग करेंगे, जिसे लगभग किसी भी HTML टैग में जोड़ा जा सकता है।
इस एट्रिब्यूट की सहायता से हम प्रत्येक तत्व में इनलाइन शैली परिभाषित कर सकते हैं।
पूर्वावलोकन भाग देखने पर हमें दिखाई देगा कि शीर्षक का रंग लाल हो गया है।
color: red;
हमने शैली की परिभाषा से तत्व के फ़ॉन्ट का रंग बदल दिया है।
<h1 style="color:red;">Hello CSS</h1>इनलाइन शैली 2
आपको याद होगा कि हमने कहा था कि HTML में टैग को व्यवहार और विशेषताएँ देने के लिए हम एट्रिब्यूट का उपयोग करते हैं।
इन एट्रिब्यूट में style सबसे महत्वपूर्ण एट्रिब्यूट में से एक है, क्योंकि हम टैग के लिए शैली परिभाषित करने हेतु style एट्रिब्यूट का उपयोग करते हैं।
इनलाइन शैली 3
अब एक नई शैली जोड़ते हैं। font-size की सहायता से हम आपके पाठ का आकार बढ़ा सकते हैं।
एक से अधिक शैलियाँ परिभाषित करते समय हमें शैलियों को अर्धविराम से अलग करना होता है।
नीचे दिए गए उदाहरण में रंग और फ़ॉन्ट-आकार की शैलियाँ अर्धविराम से अलग की गई हैं।
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>शैली की परिभाषा
शैली जोड़ते समय वाक्य-विन्यास महत्वपूर्ण होता है।
styleName: styleValue;
आइए फिर से याद करें कि हमें ऊपर बताए गए तरीके से शैली असाइन करनी होती है।
उदाहरण
अब अपने उदाहरण को थोड़ा और विस्तृत करते हैं।
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>उदाहरण 2
इस उदाहरण में हम सभी पाठ का रंग लाल करना चाहते हैं। प्रत्येक टैग के लिए हम शैली को इस प्रकार परिभाषित कर सकते हैं।
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS चयनकर्ता
लेकिन इस तरह यह बहुत अच्छा नहीं लगता, है न?
क्योंकि अब पृष्ठ पर हमारे पास 3 तत्व हैं, इसलिए हमने प्रत्येक का पाठ रंग लाल कर दिया। लेकिन यदि यह संख्या बढ़कर 3000 हो जाए, तो प्रत्येक के लिए शैली परिभाषित करने का कोई विशेष अर्थ नहीं रह जाता।
इसके बजाय, हमें प्रत्येक तत्व को इनलाइन परिभाषित करने के बजाय CSS चयनकर्ताओं का उपयोग करना चाहिए।
परिचय 12
अब आइए चयनकर्ता की अवधारणा सीखते हैं।
CSS चयनकर्ता दस्तावेज़ में मौजूद संबंधित HTML तत्व को चुनने के लिए ज़िम्मेदार होते हैं, ताकि HTML तत्वों पर शैली लागू की जा सके।
इसलिए, जैसा कि नाम से समझ आता है, वे HTML तत्वों को चुनते हैं। 😂
CSS चयनकर्ताओं को HTML दस्तावेज़ में <style> टैगों के बीच या किसी बाहरी CSS फ़ाइल में परिभाषित किया जाना चाहिए।
अपने उदाहरणों में हम सामान्यतः style टैगों के बीच लिखी जाने वाली शैली का उपयोग करेंगे। हालाँकि, शैली को बाहरी CSS फ़ाइल में परिभाषित करना अधिक उचित है।
परिचय 13
डॉट ऑपरेटर और क्लास नाम का उपयोग स्टाइल टैग के बीच एक क्लास निर्धारित करने के लिए किया जाता है। और स्टाइल की परिभाषाएँ ब्रेस के बीच लिखी जाती हैं।
.class-name {
font-size:22px;
color:red;
}
नीचे दिए गए उदाहरण में, हमने स्टाइल टैग के बीच my-component नाम की एक क्लास निर्धारित की है और संबंधित क्लास के लिए font-size स्टाइल निर्धारित की है।
<style>
.my-component{
font-size:22px;
}
</style>
अब दो पैराग्राफ एलिमेंट निर्धारित करते हैं
अब हम ऐसे दो पैराग्राफ एलिमेंट निर्धारित करते हैं जिनमें my-component क्लास है।
इस परिभाषा के बाद, क्योंकि दोनों पैराग्राफ का क्लास नाम समान है, CSS सिलेक्टर उन्हें चुनेगा और उनके फ़ॉन्ट आकार 22px कर दिए जाएँगे।
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>परिचय 6
हम एक चयनकर्ता को एक से अधिक शैलियाँ असाइन कर सकते हैं।
नीचे दिए गए उदाहरण में फ़ॉन्ट-आकार और रंग, दोनों शैलियाँ एक ही चयनकर्ता में परिभाषित की गई हैं।
<style>
.my-component{
font-size:22px;
color:red;
}
</style>CSS चयनकर्ताओं का नेस्टिंग
आइए नीचे दिए गए HTML कोड का विश्लेषण करते हैं।
एक पैराग्राफ तत्व परिभाषित किया गया है और 'Hello CSS Selectors' पाठ वाला span तत्व इस तत्व में जोड़ा गया है।
इस स्थिति में हम कह सकते हैं कि पैराग्राफ तत्व, span का पैरेंट है।
दूसरी ओर, span भी p तत्व का चाइल्ड होगा।
जीवित प्राणियों की तरह, कोड ब्लॉक में अपनी स्थिति के अनुसार हम HTML तत्वों का उपयोग पैरेंट-चाइल्ड संबंधों में करेंगे।
<p>
<span>Hello CSS Selectors</span>
</p>CSS सिलेक्टर में नेस्टिंग 2
आइए, अपने उदाहरण को थोड़ा और विस्तृत करके एलिमेंट के बीच के पदानुक्रम का फिर से विश्लेषण करते हैं।
- नीचे दिए गए उदाहरण के अनुसार
- <span> और <a> एलिमेंट एक-दूसरे के सिब्लिंग हैं।
- <span> और <a> एलिमेंट div एलिमेंट के वंशज हैं।
- <span> और <a>, <p> एलिमेंट के चाइल्ड हैं।
- <p> एलिमेंट <div> एलिमेंट का चाइल्ड है।
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>विश्लेषण का ट्री मॉडल
आइए ऊपर दिए गए चित्र को और ध्यान से देखते हैं।
निम्नलिखित HTML कोड उदाहरण को ट्री मॉडल में बदला गया है।
ध्यान दें कि ट्री मॉडल वास्तव में पैरेंट-चाइल्ड पदानुक्रम का प्रतिबिंब है।
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
तो हम इस पदानुक्रमित संबंध का उपयोग कब करते हैं
तो हम इस पदानुक्रमित संबंध का उपयोग कब करते हैं?
पहले एक उदाहरण बनाकर समस्या प्रस्तुत करते हैं। फिर देखते हैं कि इस पदानुक्रम का उपयोग करके हम समाधान कैसे दे सकते हैं।
आइए नीचे दिए गए कोड उदाहरण को देखते हैं।
मान लीजिए कि हम सभी पाठ को लाल रंग में रंगना चाहते हैं। इस स्थिति में अब तक हमने दो अलग-अलग उपयोग सीखे हैं।
- पहला और सबसे खराब तरीका यह है कि हम प्रत्येक तत्व में शैली (style = "color: red") एट्रिब्यूट को इनलाइन परिभाषित करें।
- दूसरा, हम red-txt नाम की एक क्लास परिभाषित करेंगे और प्रत्येक तत्व को एट्रिब्यूट (class = "red-txt") के रूप में असाइन करेंगे।
लेकिन इसे करने का एक आसान तरीका भी है। 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>तो हम इस पदानुक्रमित संबंध का उपयोग कब करते हैं? 2
आइए, ऊपर दिए गए कोड को फिर से देखते हैं।
जब हम root नाम वाली क्लास के div एलिमेंट पर ध्यान देते हैं, तो देखते हैं कि यह वास्तव में हमारे उदाहरण के सभी एलिमेंट का पूर्वज है।
मनुष्यों में आनुवंशिक गुण पूर्वजों से वंशजों तक पहुँचते हैं। CSS में किसी पूर्वज को दी गई शैली भी उसके वंशजों में दिखाई देती है।
इस स्थिति में, जब हम संबंधित div एलिमेंट को चुनने वाली स्टाइल परिभाषा बनाते हैं, तो हम उम्मीद कर सकते हैं कि उसके सभी वंशज इस असाइनमेंट से प्रभावित होंगे।
आइए, ऐसा करते हैं।
तो हम इस पदानुक्रमित संबंध का उपयोग कब करते हैं? 3
आइए, डॉट ऑपरेटर की सहायता से root नाम की एक क्लास निर्धारित करें और उसके भीतर स्टाइल परिभाषा (color: red के साथ) बनाएँ।
यह उन सभी एलिमेंट को चुनेगा जिनमें root क्लास है और स्वयं तथा अपने वंशजों के टेक्स्ट का रंग लाल कर देगा।
Preview सेक्शन में देखने पर हमें पता चलेगा कि सभी टेक्स्ट लाल हो गए हैं।
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>विरासत
CSS में हम इस अवधारणा को विरासत कह सकते हैं। इस सुविधा का उपयोग करके हमने अपना कोड छोटा लिखना सीखा है।
पिछले उदाहरण की तरह, प्रत्येक एलिमेंट के लिए एक-एक करके समान प्रॉपर्टी निर्धारित करने के बजाय, हमने यह प्रॉपर्टी पूर्वज एलिमेंट के लिए निर्धारित की और कोड की पुनरावृत्ति रोकी।
Head एलिमेंट का स्थान
पिछले उदाहरणों में, हमने अपने द्वारा लिखे गए HTML एलिमेंट के ठीक पास style एलिमेंट जोड़ा था।
हालाँकि, style टैग डालने का सही स्थान head टैग के बीच होता है।
इसलिए इसका उपयोग निम्नलिखित तरीके से करना अधिक सही होगा।
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>अपने कोड को यथासंभव छोटा और पुनः उपयोग योग्य लिखें
कोड लिखते समय हमें अपना कोड यथासंभव छोटा और पुनः उपयोग योग्य लिखना चाहिए।
बधाई हो
बधाई हो 🎉
इस सेक्शन में हमने आपके साथ Selector और Inheritance की अवधारणाएँ सीखीं।
अगले सेक्शन में हम CSS में स्टाइल परिभाषा के प्रकार सीखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 16
- पाठ
- 35
अक्सर पूछे जाने वाले प्रश्न
क्या “CSS का परिचय” पाठ निःशुल्क है?
हाँ—“CSS का परिचय” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और HTML for Kids पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। HTML for Kids पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
“CSS का परिचय” में मैं क्या सीखूँगा?
CSS का परिचय आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML for Kids का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML for Kids शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML for Kids शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 1 में से 1वाँ पाठ है।
“CSS का परिचय” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML for Kids पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML for Kids पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।