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

CSS सिंटैक्स

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

CSS सिंटैक्स क्या है?

CSS सिंटैक्स वह तय पैटर्न है जिसमें स्टाइल नियम लिखा जाता है। रोज़ के लगभग हर नियम की शक्ल एक जैसी होती है: पहले चुनें कि किसे स्टाइल करना है (सेलेक्टर), फिर { से डिक्लेरेशन ब्लॉक खोलें, उसमें एक या अधिक डिक्लेरेशन लिखें, और अंत में } से बंद करें। हर डिक्लेरेशन एक प्रॉपर्टी को एक वैल्यू से जोड़ती है।

CSS नियम की बनावट

नियम को नाम वाले हिस्सों में बाँटकर देखें। जब आप हर हिस्से को पहचानने लगते हैं, तो टाइपिंग की गलतियाँ पकड़ना काफ़ी आसान हो जाता है।

📊 CSS नियम के हिस्से

हिस्सा	उदाहरण	काम
सेलेक्टर	`p`	तय करता है कि नियम किन एलिमेंट पर लागू होगा
डिक्लेरेशन ब्लॉक	`{ … }`	कर्ली ब्रैकेट के बीच एक या अधिक डिक्लेरेशन रखता है
डिक्लेरेशन	`color: teal;`	प्रॉपर्टी–वैल्यू का एक निर्देश, जो आमतौर पर `;` पर खत्म होता है
प्रॉपर्टी	`color`	वह पहलू जिसे आप बदलना चाहते हैं
वैल्यू	`teal`	वह सेटिंग जो आप उस प्रॉपर्टी को देते हैं
कोलन / सेमीकोलन	`:` / `;`	कोलन प्रॉपर्टी को वैल्यू से अलग करता है; सेमीकोलन ज़्यादातर डिक्लेरेशन को खत्म करता है

हिस्सों के साथ एक नियम

यह एक सबसे छोटा नियम है जिसमें सभी मुख्य हिस्से दिखते हैं। सेलेक्टर पर हम आगे के सत्रों में गहराई से बात करेंगे; यहाँ मकसद सही ढाँचा समझना है।

हिस्सों के साथ CSS नियम

css

CSS Code

p {
color: teal;
}

बाएँ से दाएँ पढ़ें

p — सेलेक्टर (हर पैराग्राफ़)
{ … } — डिक्लेरेशन ब्लॉक
color — प्रॉपर्टी
: — प्रॉपर्टी को वैल्यू से अलग करता है
teal — वैल्यू
; — डिक्लेरेशन को खत्म करता है
स्पेस और नई पंक्तियाँ लचीली हैं। आप p{color:teal;} को एक ही लाइन में भी लिख सकते हैं; ब्राउज़र उसे उसी तरह पढ़ता है। फिर भी सीखने और टीम में काम करने के लिए कई पंक्तियों वाला साफ़-सुथरा रूप बेहतर रहता है।

एक ब्लॉक में कई डिक्लेरेशन

एक ही नियम एक सेलेक्टर के लिए कई प्रॉपर्टी तय कर सकता है। हर डिक्लेरेशन को अलग लाइन में लिखें और अंत में सेमीकोलन लगाएँ।

कई डिक्लेरेशन

css

CSS Code

.note {
color: #0f172a;
background-color: #e0f2fe;
padding: 1rem;
border-radius: 0.5rem;
}

यह काम क्यों करता है

.note एक class सेलेक्टर है (classes का अभ्यास आगे और करेंगे)
चार डिक्लेरेशन एक ही डिक्लेरेशन ब्लॉक साझा करती हैं
ब्राउज़र इन सभी को class="note" वाले एलिमेंट पर लागू करता है
दो डिक्लेरेशन के बीच सेमीकोलन छूट जाए तो अगली प्रॉपर्टी लागू न होने का खतरा रहता है

सेलेक्टर को समूह में रखना

जब कई सेलेक्टर को एक जैसी स्टाइल चाहिए, तो उन्हें कॉमा से अलग करके लिखें। सबके लिए एक ही डिक्लेरेशन ब्लॉक काफ़ी है।

समूहित सेलेक्टर

css

CSS Code

h1, h2, h3 {
font-family: Georgia, serif;
color: #1e293b;
}

समूह कब बनाएँ

जब हेडिंग (या दूसरे एलिमेंट) का रूप-रंग एक जैसा रखना हो, तब समूह बनाने से कॉपी-पेस्ट नहीं करना पड़ता। अगर बाद में किसी सेलेक्टर को अलग स्टाइल चाहिए, तो समूह को भारी करने के बजाय उसके लिए अलग नियम लिखें।

विराम-चिह्नों की चेकलिस्ट

लिखते समय यह छोटी सूची याद रखें:

कर्ली ब्रैकेट डिक्लेरेशन ब्लॉक को घेरते हैं
कोलन प्रॉपर्टी और वैल्यू के बीच आता है
सेमीकोलन हर डिक्लेरेशन को खत्म करता है (अगली डिक्लेरेशन से पहले ज़रूरी है; आख़िरी के बाद भी लगाना अच्छी आदत है)
कॉमा समूहित सेलेक्टर को अलग करते हैं — प्रॉपर्टी को नहीं
प्रॉपर्टी के नाम और ज़्यादातर कीवर्ड वैल्यू में अक्षरों के छोटे-बड़े होने से फ़र्क नहीं पड़ता, पर परंपरा से उन्हें छोटे अक्षरों में लिखा जाता है

खुद आज़माएँ

syntax.html बनाएँ, जिसमें <p class="note">Syntax practice</p> पैराग्राफ़ और head में एक <style> ब्लॉक हो।
इस सत्र वाला कई डिक्लेरेशन का .note नियम जोड़ें।
background-color को #fef3c7 कर दें, सेव करें और पेज रीफ़्रेश करें।
उसी ब्लॉक में पाँचवीं डिक्लेरेशन font-size: 1.125rem; जोड़ें, सेव करें और फिर रीफ़्रेश करें।
देखें कि बैकग्राउंड और फ़ॉन्ट का आकार दोनों बदल गए हैं। न बदले हों, तो कर्ली ब्रैकेट और सेमीकोलन जाँचें।

आम गलतियाँ

कोलन के बिना color teal लिखना — ब्राउज़र डिक्लेरेशन को समझ नहीं पाता
{ या } भूल जाना, जिससे डिक्लेरेशन ब्लॉक के बाहर रह जाती हैं और अनदेखी कर दी जाती हैं
दो डिक्लेरेशन के बीच सेमीकोलन छोड़ देना, जिससे दूसरी प्रॉपर्टी लागू नहीं होती
प्रॉपर्टी और वैल्यू के बीच कोलन की जगह कॉमा लगाना (color, teal)
बिना सेलेक्टर या ब्रैकेट के अकेली प्रॉपर्टी लिख देना — यह पूरा नियम नहीं है

सारांश

CSS सिंटैक्स = सेलेक्टर + डिक्लेरेशन से भरा डिक्लेरेशन ब्लॉक { }
डिक्लेरेशन का रूप property: value; होता है
एक ब्लॉक में एक ही सेलेक्टर के लिए कई डिक्लेरेशन हो सकती हैं
कॉमा उन सेलेक्टर को समूह में जोड़ते हैं जिनकी स्टाइल एक जैसी है
ब्रैकेट, कोलन और सेमीकोलन में सावधानी रखने से चुपचाप होने वाली गलतियों से बचाव होता है
वैल्यू बदलकर और डिक्लेरेशन जोड़कर अभ्यास करें, फिर पेज रीफ़्रेश करके नतीजा देखें

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

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

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

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

❓

प्रश्न

🎯

70%

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

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

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

भाषा

CSS सिंटैक्स

इस ट्यूटोरियल को साझा करें