📘 Lesson  ·  Lesson 02

CSS Syntax and Rules

CSS Syntax और Rules

Anatomy of a CSS Rule

h1  {  color: navy;  }
│      │      │
│      │      value
│      property
selector
Every CSS rule has the same shape: a selector (WHICH elements to style), then curly braces { } holding one or more declarations. Each declaration is a property: value pair ending with a semicolon. Read the example as: "select all h1 elements, and set their color property to the value navy." Once you see this pattern, all of CSS is just this shape repeated with different selectors, properties and values.

Selector, Property, Value — the three parts

PartAnswersExample
SelectorWHICH elements?h1, p, .btn, #header
PropertyWHAT to change?color, font-size, margin
ValueChange it TO what?navy, 18px, 10px
p {
    color: gray;        ← property: value ;
}
                          the colon separates property from value
                          the semicolon ends the declaration

The colon (:) separates property from value; the semicolon (;) ends each declaration. These two punctuation marks are the grammar of CSS — get them right and CSS just works.

Multiple Declarations — stack them up

h1 {
    color: navy;
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
}
One selector, four style changes — all applied to every h1.

A selector can hold as many declarations as you want, each on its own line, each ending in a semicolon. Convention: one declaration per line, indented inside the braces — this readability is why the semicolon on the LAST declaration is technically optional but always written (so you never forget it when adding the next line).

Grouping Selectors — one rule, many elements

/* Instead of writing the same style three times: */
h1 { color: navy; }
h2 { color: navy; }
h3 { color: navy; }

/* Group them with commas: */
h1, h2, h3 {
    color: navy;
}
The comma means "OR" — "select h1 OR h2 OR h3, and apply this to all of them." Grouping keeps your CSS short and consistent: change the colour once and all three headings update. This is a core habit of clean, DRY (Don't Repeat Yourself) CSS.

Common Syntax Mistakes

h1 { color navy; }        ❌ missing colon → color: navy;
h1 { color: navy }        ⚠ missing semicolon (works for last, risky)
h1 { color: navy; }       ✅ correct
h1 ( color: navy; )       ❌ round brackets → use curly braces { }
h1 { colour: navy; }      ❌ "colour" - CSS uses American "color"
.btn { font-size: 16 }    ❌ missing unit → 16px
The silent-failure trap: if you make a syntax mistake in ONE declaration, CSS often skips just that line and continues — no error message, the style simply "doesn't work". So when a style won't apply, check the syntax first: a missing semicolon on the line ABOVE can break the line below. Browsers are forgiving to a fault, which makes careful syntax your responsibility.

CSS Rule की बनावट

h1  {  color: navy;  }
│      │      │
│      │      value
│      property
selector
हर CSS rule की एक ही shape है: एक selector (KIN elements को style करना), फिर curly braces { } जिनमें एक या ज़्यादा declarations. हर declaration एक property: value जोड़ी है जो semicolon पर खत्म होती है. Example पढ़िए: "सारे h1 elements select करो, और उनकी color property की value navy करो." यह pattern दिख गया तो पूरी CSS बस यही shape है, अलग-अलग selectors, properties और values के साथ दोहराई हुई.

Selector, Property, Value — तीन हिस्से

हिस्साजवाब देता हैExample
SelectorKIN elements?h1, p, .btn, #header
PropertyKYA बदलना?color, font-size, margin
ValueKISME बदलना?navy, 18px, 10px
p {
    color: gray;        ← property: value ;
}
                          colon property ko value se alag karta hai
                          semicolon declaration khatam karta hai

Colon (:) property को value से अलग करता है; semicolon (;) हर declaration खत्म करता है. ये दो विराम-चिह्न CSS की grammar हैं — इन्हें सही रखिए और CSS बस चल पड़ती है.

कई Declarations — एक के ऊपर एक

h1 {
    color: navy;
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
}
Ek selector, chaar style changes — har h1 par lagte hain.

एक selector में जितनी चाहें declarations हो सकती हैं, हर एक अपनी line पर, हर एक semicolon पर खत्म. Convention: एक declaration प्रति line, braces के अंदर indented — इसी readability के कारण AKHRI declaration का semicolon technically optional है पर हमेशा लिखा जाता है (ताकि अगली line जोड़ते समय भूलें नहीं).

Selectors Group करना — एक rule, कई elements

/* Same style teen baar likhne ke bajaye: */
h1 { color: navy; }
h2 { color: navy; }
h3 { color: navy; }

/* Commas se group karo: */
h1, h2, h3 {
    color: navy;
}
Comma का मतलब "OR" — "h1 YA h2 YA h3 select करो, और सब पर यह लगाओ." Grouping आपकी CSS छोटी और consistent रखती है: colour एक बार बदलिए और तीनों headings update. यह साफ, DRY (Don't Repeat Yourself) CSS की core आदत है.

आम Syntax गलतियां

h1 { color navy; }        ❌ colon gayab → color: navy;
h1 { color: navy }        ⚠ semicolon gayab (aakhri ke liye chalta, risky)
h1 { color: navy; }       ✅ sahi
h1 ( color: navy; )       ❌ gol brackets → curly braces { } use karo
h1 { colour: navy; }      ❌ "colour" - CSS American "color" use karti hai
.btn { font-size: 16 }    ❌ unit gayab → 16px
Silent-failure trap: अगर आप EK declaration में syntax गलती करें, CSS अक्सर सिर्फ वह line छोड़कर आगे बढ़ जाती है — कोई error नहीं, style बस "काम नहीं करता". तो जब कोई style न लगे, पहले syntax check कीजिए: ऊपर की line पर गायब semicolon नीचे की line तोड़ सकता है. Browsers हद से ज़्यादा माफ करने वाले हैं, इसलिए सावधान syntax आपकी ज़िम्मेदारी है.
← Back to CSS Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.