CSS की मूल बातें
CSS के साथ स्टाइलिंग का परिचय (वैकल्पिक अवलोकन)
CSS की मूल बातें, CoddyKit पर HTML for Kids का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह HTML for Kids सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
CSS की मूल बातें: CSS से सज्जा का परिचय
CSS की दुनिया में आपका स्वागत है! आज हम कैस्केडिंग स्टाइल शीट्स (CSS) का उपयोग करके अपने वेब पेज को सजाना और उन्हें शानदार दिखाना सीखेंगे।
CSS क्या है?
CSS का पूरा नाम कैस्केडिंग स्टाइल शीट्स है। यह आपके वेब पेज के रूप-रंग को नियंत्रित करने के लिए उपयोग की जाने वाली भाषा है।
CSS की सहायता से आप रंग, फ़ॉन्ट, लेआउट और भी बहुत कुछ बदल सकते हैं!
CSS कैसे काम करता है
CSS HTML एलिमेंट का चयन करके उन पर स्टाइल लागू करता है। आप CSS का उपयोग तीन तरीकों से कर सकते हैं:
- इनलाइन: स्टाइल सीधे HTML एलिमेंट के अंदर जोड़ें।
- आंतरिक:
<head>में मौजूद<style>टैग के अंदर स्टाइल जोड़ें। - बाहरी: अलग CSS फ़ाइल का उपयोग करें।
इस पाठ में हम आंतरिक और बाहरी स्टाइल पर ध्यान देंगे।
आंतरिक CSS
आंतरिक CSS आपके HTML दस्तावेज़ के <head> में मौजूद <style> टैग के अंदर लिखी जाती है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
बाहरी CSS
बाहरी CSS .css एक्सटेंशन वाली अलग फ़ाइल में लिखी जाती है। इसे अपने HTML दस्तावेज़ से जोड़ने के लिए <link> टैग का उपयोग करें।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
CSS में चयनकर्ता
चयनकर्ताओं का उपयोग सज्जा के लिए विशेष HTML एलिमेंट को लक्षित करने हेतु किया जाता है। सामान्य चयनकर्ताओं में शामिल हैं:
- टैग चयनकर्ता: किसी विशेष टैग वाले सभी एलिमेंट को लक्षित करता है। उदाहरण:
p। - क्लास चयनकर्ता: किसी विशेष क्लास वाले एलिमेंट को लक्षित करता है। उदाहरण:
.myClass। - ID चयनकर्ता: किसी विशेष ID वाले एलिमेंट को लक्षित करता है। उदाहरण:
#myID।
आइए देखें कि इनका उपयोग कैसे करें!
क्लास और ID चयनकर्ता
जब आप कई एलिमेंट को सजाना चाहते हों, तब क्लास का उपयोग करें। किसी एक विशिष्ट एलिमेंट के लिए ID का उपयोग करें।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
स्वयं आज़माएँ
आइए, आंतरिक CSS का उपयोग करके एक वेब पेज बनाएँ। शुरुआत करने के लिए यहाँ एक उदाहरण है:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
बहुत बढ़िया!
बधाई हो! आपने CSS की मूल बातें और अपने वेब पेज को सजाने के लिए इसका उपयोग करना सीख लिया है। CSS आपके पेज को पेशेवर और देखने में आकर्षक बनाता है। अगले पाठ में, हम आपके पेज को और अधिक जीवंत बनाने के लिए रंगों और पृष्ठभूमि के बारे में विस्तार से सीखेंगे। अपनी रचनात्मकता को उजागर करने के लिए तैयार हो जाइए!
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 16
- पाठ
- 35
अक्सर पूछे जाने वाले प्रश्न
क्या “CSS की मूल बातें” पाठ निःशुल्क है?
हाँ—“CSS की मूल बातें” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और HTML for Kids पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“CSS की मूल बातें” में मैं क्या सीखूँगा?
CSS के साथ स्टाइलिंग का परिचय (वैकल्पिक अवलोकन) आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML for Kids का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML for Kids शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML for Kids शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“CSS की मूल बातें” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML for Kids पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML for Kids पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- इनलाइन शैलियाँ
- CSS की मूल बातें
- रंग और पृष्ठभूमियाँ
- पाठ का स्वरूपण