लोड हो रहा है...

CSS परिचय

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

CSS क्या है?

CSS का मतलब Cascading Style Sheets है — HTML दस्तावेज़ों को स्टाइल करने की मानक भाषा। आप नियम लिखते हैं जो ब्राउज़र को बताते हैं कि तत्व कैसे दिखें: टेक्स्ट का रंग, फ़ॉन्ट, मार्जिन, बैकग्राउंड, लेआउट और अन्य विवरण। HTML पूछता है «यह सामग्री क्या है?» CSS पूछता है «यह कैसे दिखनी चाहिए?»

HTML और CSS साथ काम करते हैं

HTML को पेज का ढाँचा समझें और CSS को कपड़े व फिनिश। आपको अब भी ठोस HTML चाहिए — शीर्षक, पैराग्राफ, लिंक और अर्थपूर्ण खंड — ताकि CSS के पास स्टाइल करने योग्य तत्व हों। यह कोर्स मानता है कि आप बुनियादी HTML पहले से जानते हैं।

📊 HTML बनाम CSS की भूमिकाएँ

परत	मुख्य काम	आम सवाल
HTML	संरचना और अर्थ	क्या यह शीर्षक है, पैराग्राफ, या लिंक?
CSS	प्रस्तुति और लेआउट	कौन सा रंग, आकार, दूरी और व्यवस्था?
JavaScript (बाद में)	व्यवहार और इंटरैक्शन	क्लिक पर क्या होता है?

JavaScript आप बाद के कोर्स में पढ़ेंगे। अभी विभाजन साफ़ रखें: संरचना HTML में, रूप CSS में।

CSS नियम की पहली झलक

एक CSS नियम में सिलेक्टर होता है (क्या स्टाइल करें) और declaration (कैसे स्टाइल करें)। Declaration घुंघराले कोष्ठक { } के अंदर होते हैं और प्रत्येक में एक property तथा एक value होती है।

एक सरल नियम

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

यह नियम क्या करता है

h1 सिलेक्टर है — हर h1 तत्व को लक्ष्य बनाता है
color: navy; टेक्स्ट का रंग सेट करता है
font-size: 2rem; शीर्षक का आकार सेट करता है
हर declaration सेमीकोलन पर खत्म होती है
सिलेक्टर और इकाइयाँ बाद के सत्रों में गहराई से आएंगी। यहाँ नियम का आकार पहचानना काफी है।

पेज पर CSS देखना

ब्राउज़र मिलते HTML तत्वों पर CSS नियम लागू करता है। नीचे एक छोटा पेज आंतरिक <style> ब्लॉक इस्तेमाल करता है ताकि HTML और CSS एक फ़ाइल में दिखें। बाद के सत्र बाहरी stylesheet और CSS जोड़ने के अन्य तरीके कवर करेंगे।

style ब्लॉक वाला HTML

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

क्या बदला

<style> नियमों के बिना पेज ब्राउज़र का डिफ़ॉल्ट रूप लेता है। CSS से बैकग्राउंड नरम होता है, शीर्षक गहरा नीला होता है और पैराग्राफ पढ़ने योग्य दूरी पाता है। वही HTML सामग्री — अलग प्रस्तुति।

«cascading» क्यों मायने रखता है (झलक)

«Cascading» का मतलब है कि स्टाइल कई जगहों से आ सकते हैं और ब्राउज़र cascade तथा specificity से तय करता है कौन सा नियम जीते। पूरा एल्गोरिद्म अभी ज़रूरी नहीं। इतना याद रखें: कई नियम एक ही तत्व को लक्ष्य कर सकते हैं, और CSS के पास अंतिम रूप चुनने की स्पष्ट व्यवस्था है। बाद के सत्र इसे व्यवहार में लाएँगे।

खुद आज़माएँ

intro.html नाम की फ़ाइल बनाएँ।
style ब्लॉक वाला HTML उदाहरण चिपकाएँ, सेव करें और ब्राउज़र में खोलें।
h1 नियम में color: #1a365d; को color: teal; करें, सेव करें और रिफ़्रेश करें।
शीर्षक का रंग बदलना चाहिए। नहीं बदला तो सेव और सही टैब जाँचें।

आम गलतियाँ

उम्मीद कि CSS पेज की संरचना बनाएगा — शीर्षक, सूची और लिंक HTML तत्वों से बनाएँ; CSS से स्टाइल करें
बिना सिलेक्टर या कोष्ठक के property नाम लिखना, जिससे ब्राउज़र declaration अनदेखा कर दे
declaration के बाद सेमीकोलन भूलना, जिससे उसी नियम की अगली property टूट सकती है
दिखने वाला टेक्स्ट सिर्फ CSS में रखना — CSS सामग्री स्टाइल करता है; HTML टेक्स्ट की जगह नहीं लेता

सारांश

CSS HTML पेजों का रूप नियंत्रित करता है: रंग, फ़ॉन्ट, दूरी, लेआउट और प्रस्तुति
HTML सामग्री की संरचना बनाता है; CSS बताता है वह कैसे दिखे
CSS नियम सिलेक्टर को { } के अंदर property/value declaration से जोड़ता है
<style> ब्लॉक से शुरू कर सकते हैं, फिर बाहरी stylesheet पर जा सकते हैं
Cascading का मतलब है कई नियम लागू हो सकते हैं; बाद के पाठ बताएँगे कौन जीते
छोटा नियम बदलकर और ब्राउज़र रिफ़्रेश करके अभ्यास करें

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा