CSS Syntax

जब हम CSS लिखते हैं, तो उसका एक खास structure (ढांचा) होता है। इसी structure को CSS Syntax कहा जाता है। जैसे किसी sentence में subject, verb, object होते हैं, वैसे ही CSS में selector, property, और value होते हैं।

CSS Syntax का Basic Structure

selector {
  property: value;
}

अब समझते हैं इसका meaning:

Part (भाग)	Description (विवरण)	Example (उदाहरण)
Selector(सेलेक्टर)	ये बताता है कि HTML का कौन साelementstyle होगा।	`h1`,`.class-name`,`#id-name`
Property(प्रॉपर्टी)	क्या चीज़ बदलनी है (जैसेcolor,font-size,background)।	`color`,`font-family`,`margin`
Value(वैल्यू)	उस property को क्यावैल्यूदेनी है (जैसेred,16px,#000)।	`blue`,`24px`,`Arial, sans-serif`

Example – Simple CSS Rule

p {
  color: blue;
  font-size: 20px;
}

इसका मतलब: सभी <p> (paragraph) टैग का text नीला (blue) होगा और text size 20px।

Selector क्या होता है?

Selector CSS का सबसे important हिस्सा है। यह बताता है कि कौन सा HTML element या elements को हम style देना चाहते हैं।

Example:

h1 {
  color: green;
}

इसका मतलब है कि <h1> टैग का टेक्स्ट हरा (green) होगा। हम आगे “CSS Selectors” नाम के लेसन में हर selector (class, id, attribute, etc.) को detail में सीखेंगे।

Property और Value को समझिए

हर CSS rule में property और value pair में लिखे जाते हैं:

property: value;

और हर pair के बाद semicolon ( ; ) लगाना जरूरी है। अगर एक से ज्यादा properties हैं तो सभी को एक के नीचे लिखा जाता है। Example:

h1 {
  color: red;
  text-align: center;
  font-size: 24px;
}

यहाँ तीन property-value pairs हैं:

color: red;
text-align: center;
font-size: 24px;

CSS Syntax को Line by Line समझिए

h1 {                  /* ← Selector */
  color: red;         /* ← Property: Value */
  text-align: center; /* ← Property: Value */
}                     /* ← बंद करने वाली curly bracket */

{ } ब्रैकेट के अंदर styling code लिखा जाता है।
हर property के बाद ; (semicolon) लगाना जरूरी है।
पूरा CSS code साफ और readable रखना एक अच्छी आदत है।

CSS में Comments कैसे लिखते हैं?

कई बार हमें CSS में notes या explanation लिखनी होती है — इसके लिए comments लिखे जाते हैं। Comments को ब्राउज़र ignore कर देता है।

/* यह एक CSS Comment है */
p {
  color: green; /* यह लाइन text को green कर रही है */
}

Comments हमेशा /* से शुरू होकर */ पर खत्म होते हैं।

Common Syntax Errors (CSS Mistakes)

CSS सीखते समय कुछ आम गलतियाँ हर beginner करता है, जैसे:

गलती (Mistake) ❌	क्यों गलत है (Reason for Error) ❓
`color = red;`	सही सिंटैक्स `color: red;` है। प्रॉपर्टी और वैल्यू के बीच में कॉलन (:) का उपयोग होता है, बराबर चिह्न (=) का नहीं।
`font-size: 16px`	प्रत्येक CSS घोषणा (declaration) के अंत में सेमीकोलन (;) लगाना भूल गए।
`h1 color: blue;`	CSS नियम (rule) में कर्ली ब्रैकेट्स`{ }` लगाना भूल गए, जो सिलेक्टर (`h1`) के बाद घोषणाओं को घेरते हैं।
`text-align center;`	प्रॉपर्टी (`text-align`) और वैल्यू (`center`) के बीच में कॉलन (:) मिसिंग है।

सही तरीका:

h1 {
  color: blue;
  text-align: center;
}

Complete Example (HTML + CSS)

चलो एक पूरा working example देखें

<!DOCTYPE html>
<html>
<head>
<style>
  /* यह internal CSS है */
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }

  h1 {
    color: #0077cc;
    text-align: center;
  }

  p {
    color: #333;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<h1>Welcome to CSS Syntax Lesson</h1>
<p>यहाँ आपने सीखा कि CSS कैसे लिखा और समझा जाता है।</p>

</body>
</html>

Output → Centered blue heading और नीचे simple paragraph।

Quick Recap

अवधारणा (Concept)	विवरण (Description)
Selector	बताता है कौन सा HTML element style होगा
Property	क्या change करना है
Value	कितना change करना है
Brackets {}	CSS block define करते हैं
Semicolon ;	हर property के बाद जरूरी
Comment	/* ... */ के बीच लिखा जाता है

Final Thoughts

CSS Syntax सीखना foundation है — अगर आप Syntax को अच्छे से समझ गए, तो आगे आने वाले सभी टॉपिक्स जैसे Selectors, Colors, Backgrounds, Margins, आदि बहुत आसान लगेंगे। अब तैयार हो जाइए अगले लेसन के लिए — "CSS Selectors", जहाँ आप सीखेंगे कि HTML elements को Target करने के अलग-अलग स्मार्ट तरीके क्या होते हैं।