CSS Introduction
आज हम CSS सीखते हैं — एक नियम selector से HTML element चुनता है, फिर property को value देता है ताकि browser पेज पेंट कर सके।
इस पाठ में आप क्या सीखेंगे
- 01HTML कंकाल है, CSS रंग-रूप और इंटीरियर डिज़ाइन
- 02CSS नियम के 3 अंग: Selector, Property, Value
- 03सेमीकोलन (;) की अहमियत: क्यों यह अनिवार्य है
- 04ब्राउज़र कैसे CSS को पढ़कर स्क्रीन पर पेंट करता है
- 05पहली लाइव CSS स्टाइलिंग: हेडिंग और टेक्स्ट सजाना
; लगाना अनिवार्य है।- 1
CSS की ज़रूरत क्यों पड़ी: रूप-रंग और ढाँचे का अलगाव
इंटरनेट के शुरुआती दिनों में डेवलपर्स
<font color="red">और<center>जैसे टैग्स हर लाइन पर बिखेरते थे। अगर कंपनी की ब्रांड थीम बदलती, तो इंजीनियरों को सैकड़ों पेजों पर हज़ारों टैग्स हाथ से बदलने पड़ते थे।इसीलिए Cascading Style Sheets (CSS) बनाई गई। HTML तय करता है कि कोई चीज़ क्या है (हेडिंग, पैराग्राफ, बटन)। और CSS तय करता है कि वह कैसा दिखेगा (रंग, आकार, स्पेसिंग, लेआउट)।
- 2
हर CSS नियम के 3 बुनियादी अंग
CSS की हर लाइन इसी तय संरचना (pattern) पर चलती है:
- Selector: ब्राउज़र को बताता है कि किस एलिमेंट को निशाना बनाना है (जैसे
p,h1, या.card)। - Declaration Block: कर्ली ब्रैकेट्स
{ ... }के अंदर की पूरी सामग्री। - Property & Value: हर निर्देश
property: value;के रूप में लिखा जाता है, बीच में कोलन और अंत में सेमीकोलन अनिवार्य है।
- Selector: ब्राउज़र को बताता है कि किस एलिमेंट को निशाना बनाना है (जैसे
- 3
ब्राउज़र CSS को पढ़कर स्क्रीन पर कैसे पेंट करता है
जब ब्राउज़र HTML फ़ाइल पढ़ता है, तो साथ ही वह CSS Object Model (CSSOM) तैयार करता है। वह सेलेक्टर्स को HTML टैग्स से मिलाता है, फ़ाइनल रंग व साइज़ की गणना करता है और स्क्रीन पर पिक्सेल ड्रा करता है।
यदि आप एक सेमीकोलन लगाना भूल जाते हैं, तो ब्राउज़र समझ नहीं पाता कि वह निर्देश कहाँ खत्म हुआ, और आगे की सारी स्टाइलिंग चुपचाप फ़ेल हो जाती है।
- 4
आज की प्रैक्टिस: शुद्ध CSS से टेक्स्ट को स्टाइल करना
नीचे दिए गए कोड को ध्यान से देखें। सेलेक्टर
pसभी पैराग्राफ्स को चुनकर उन्हें आकर्षक नीला रंग,16pxफॉन्ट साइज़ और बीच में सेंटर अलाइन करता है। - 5
सुनहरा नियम: सेमीकोलन कभी न भूलें
CSS में सेमीकोलन कोई सजावट नहीं है—यह पूर्णविराम है। कर्ली ब्रैकेट
{ }के अंदर की हर लाइन एक स्वतंत्र आदेश है जिसे;से सील करना ज़रूरी है।
लाइन-बाय-लाइन विश्लेषण
p {सेलेक्टर। यह नियम ब्राउज़र से कहता है कि पूरे पेज के हर
<p>को स्टाइल करो। ओपनिंग कर्ली ब्रैकेट घोषणा ब्लॉक शुरू करता है।color: #0284c7;टेक्स्ट का रंग आधुनिक नीला करता है। सेमीकोलन इस निर्देश को समाप्त करता है।
font-size: 16px;अक्षरों का आकार तय करता है।
16pxवेब पर डिफ़ॉल्ट मानक आकार माना जाता है।text-align: center;पैराग्राफ के अंदर अक्षरों को बीचों-बीच सेंटर में रखता है। क्लोजिंग
}नियम को पूरा करता है।
खुद ट्राई करो
ऊपर लाइव एडिटर में ऐसा CSS नियम लिखो जो हर h1 को गहरा इंडिगो रंग (#4f46e5), 32px साइज़ दे और सेंटर अलाइन करे।
हिंट: यही ढाँचा उपयोग करें: h1 { color: ...; font-size: ...; text-align: ...; }
💡 समाधान देखें (यदि अटक गए हों)
h1 {
color: #4f46e5;
font-size: 32px;
text-align: center;
}अगर आप CSS प्रॉपर्टी के मान के अंत में सेमीकोलन (;) लगाना भूल जाएं, तो क्या होगा?
गलती कहाँ होती है
- 1.सेमीकोलन भूल जाना। अगली लाइन इसमें मिल जाती है और दोनों स्टाइलिंग काम करना बंद कर देती हैं।
- 2.बिना सेलेक्टर के सीधे प्रॉपर्टी लिख देना। ब्राउज़र को हमेशा टारगेट एलिमेंट का नाम चाहिए।
- 3.कोलन
:की जगह बराबर का निशानcolor = red;लगा देना।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: CSS का पूरा नाम क्या है और 'Cascading' का क्या अर्थ है?▼
CSS का पूरा नाम Cascading Style Sheets है। 'Cascading' का मतलब है स्टाइल का ऊपर से नीचे बहना और इनहेरिट होना। जब एक ही एलिमेंट पर कई नियम लागू होते हैं, तो Cascade उनकी स्पेसिफिसिटी और क्रम देखकर विजेता चुनता है।
Q: CSS नियम के 3 मुख्य भाग कौन से होते हैं?▼
1. Selector (टारगेट तय करता है), 2. Declaration Block (कर्ली ब्रैकेट के अंदर), और 3. Declarations (जो property: value; के जोड़े होते हैं)।
Q: HTML और CSS में मूल अंतर क्या है?▼
HTML वेबपेज की संरचना, सिमेंटिक अर्थ और सामग्री तय करता है। जबकि CSS उसकी दृश्य प्रस्तुति, रंग, फॉन्ट्स, स्पेसिंग और लेआउट को नियंत्रित करता है।