CSS सिंटैक्स

हर CSS नियम एक ही आकार का होता है। एक बार यह आकार सीख लिया, तो आप दुनिया का कोई भी CSS पढ़ सकते हैं, क्योंकि हर नियम — सबसे साधारण रंग बदलने से लेकर पूरे पेज की बनावट तक — उन्हीं टुकड़ों से बना होता है।

Diagram — देखें, यह सब कैसे जुड़ता है

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

नियम के दो हिस्से होते हैं। पहले आता है selector — यह बताता है कि पेज के किस हिस्से को सजाना है। फिर आता है declaration block, घुँघराले कोष्ठकों { } के अंदर — यह बताता है कि वह हिस्सा कैसा दिखना चाहिए।

कोष्ठकों के अंदर declarations होते हैं। हर declaration में एक property होती है (क्या बदलना है, जैसे color) और एक value होती है (किसमें बदलना है, जैसे red)। Property और value colon : से अलग होते हैं, और हर declaration semicolon ; पर खत्म होता है।

सिंटैक्स — नियम का आकार

selector {
  property: value;
  property: value;
}

यहाँ एक असली नियम है, जिसका हर हिस्सा बताया गया है:

p {
  color: darkblue;
  font-size: 18px;
}

Selector है p — पेज का हर paragraph। पहला declaration, color: darkblue;, text को गहरा नीला बनाता है। दूसरा declaration, font-size: 18px;, text को 18 pixel ऊँचा बनाता है। हर declaration के बाद semicolon browser को बताता है कि "यह निर्देश खत्म हुआ, अगला यहाँ से शुरू होता है।"

CSS में Comments

कभी-कभी आप code में अपने लिए एक note छोड़ना चाहते हैं — एक ऐसा note जिसे browser को नज़रअंदाज़ करना है। CSS comments /* से शुरू होते हैं और */ पर खत्म होते हैं। इनके बीच जो कुछ भी है, वह नज़रअंदाज़ कर दिया जाता है, चाहे वह कई lines में ही क्यों न हो।

/* This rule styles the main heading */
h1 {
  color: green; /* green means "fresh" on our site */
}

Comments मुफ्त होते हैं: उनकी कोई कीमत नहीं होती, और वे भविष्य के आपको बहुत उलझन से बचाते हैं। उनका इस्तेमाल यह समझाने के लिए कीजिए कि नियम क्यों है, न कि क्या करता है — code पहले से ही बता देता है कि वह क्या करता है।

आम गलतियाँ

• Property और value के बीच colon भूल जाना — color red; कुछ नहीं करता। यह color: red; होना चाहिए।
• Semicolon भूल जाना — अगला declaration पिछले वाले से चिपक जाता है और दोनों टूट जाते हैं।
• Closing brace } भूल जाना — उसके बाद के हर नियम काम करना बंद कर देते हैं, क्योंकि browser सोचता है कि वह अभी भी पहले नियम के अंदर है।
• : की जगह = इस्तेमाल करना — CSS में colon चलता है, equals sign नहीं। color = red CSS नहीं है।
• Property के नाम capital letters में लिखना — CSS के लिए Color और color अलग हैं। हमेशा lowercase इस्तेमाल करें।

याद रखें

• नियम है selector { property: value; } — selector चुनता है, declarations सजाते हैं।
• Colon property और value को अलग करता है; semicolon हर declaration को खत्म करता है।
• घुँघराले कोष्ठक { } declaration block को घेरते हैं — हर opening brace को closing brace चाहिए।
• Comments /* this */ जैसे दिखते हैं और browser उन्हें नज़रअंदाज़ कर देता है।
• Spacing और line breaks से मतलब नहीं बदलता — उन्हें code को पढ़ने लायक बनाने के लिए इस्तेमाल करें।

उदाहरण समझिए

• h1 { color: darkgreen; } — एक नियम, एक declaration। पेज का हर h1 गहरा हरा हो जाता है।
• p { color: #333; font-size: 18px; line-height: 1.6; } — एक नियम, तीन declarations। सभी paragraphs को गहरा भूरा text, 18 pixel ऊँचाई और lines के बीच अच्छी जगह मिलती है।
• .highlight { background-color: yellow; } — dot का मतलब है "class"। सिर्फ class="highlight" वाले elements को पीली पृष्ठभूमि मिलती है।
• #special { font-weight: bold; } — hash का मतलब है "id"। सिर्फ id="special" वाला एक element bold बनता है।
• /* Welcome message */ — एक comment। Browser इसे पूरी तरह नज़रअंदाज़ कर देता है; यह सिर्फ code पढ़ने वाले इंसान के लिए है।