CSS Syntax

हर CSS rule एक ही basic recipe follow करता है: आप बताते हैं कि आप क्या style करना चाहते हैं, फिर बताते हैं कि आप उसे कैसा दिखाना चाहते हैं। CSS syntax के पीछे यही पूरा idea है। एक CSS rule के दो मुख्य हिस्से होते हैं: एक selector, जो उस HTML को point करता है जिसे आप style करना चाहते हैं (जैसे हर paragraph, या कोई एक specific button), और एक declaration block, जो curly braces में wrap होता है, जो असली style changes को property-value pairs की तरह semicolons से अलग करके list करता है। एक बार जब यह pattern समझ आ जाता है, तो cookiescursor.com जैसे किसी असली project के लिए CSS पढ़ना और लिखना काफ़ी कम डरावना हो जाता है, क्योंकि जो भी rule आप कभी लिखेंगे वह इसी shape को follow करता है।

In this page:

CSS Rule की Anatomy
Selectors और Declaration Blocks
Properties और Values
एक ही Rule में कई Declarations
Selectors को Group करना

Syntax

css

selector {
  property: value;
  property: value;
}

CSS Rule की Anatomy

एक CSS rule के हमेशा दो हिस्से होते हैं: एक selector जो बताता है कि क्या style करना है, और curly braces में एक declaration block जो बताता है कि उसे कैसे style करना है। दोनों मिलकर एक पूरा rule बनाते हैं। अगर कोई हिस्सा missing है या braces mismatched हैं, तो browser आमतौर पर पूरे malformed rule को नज़रअंदाज़ कर देगा।

Note: किसी CSS rule को ज़ोर से 'इसे select करो, फिर ये properties set करो' की तरह पढ़ें, इससे structure याद रखना काफ़ी आसान हो जाता है।

Warning: बिना declaration block वाला selector, या बिना selector वाला declaration block, एक valid CSS rule नहीं है।

उदाहरण: Anatomy of a CSS Rule

css

<style>
p {
  color: blue;
}
</style>
<p>Selector "p" plus a declaration block "{ color: blue; }"</p>

Selectors और Declaration Blocks

Selector opening curly brace से पहले आता है और यह पहचानता है कि rule किन elements पर लागू होता है। Curly braces के बीच जो कुछ भी है वह declaration block है, जिसमें असली styling instructions होते हैं।

Note: Selector और opening curly brace के बीच एक space डालें, यह एक छोटी सी आदत है जो CSS को scan करना आसान बनाए रखती है।

Warning: किसी selector में typo, जैसे किसी class name की spelling गलत होना, इसका मतलब है कि rule चुपचाप किसी से भी match नहीं करता, कोई error नहीं दिखता।

उदाहरण: Selectors and Declaration Blocks

css

<style>
.highlight {
  background: yellow;
}
</style>
<p class="highlight">Selector before the brace, declarations inside</p>

Properties और Values

किसी declaration block के अंदर, हर line एक property (आप किस चीज़ को बदल रहे हैं, जैसे color या padding) और एक value (आप कौन-सी setting चाहते हैं, जैसे red या 16px) का जोड़ा होता है, जिन्हें एक colon से अलग किया जाता है।

Note: CSS में सैकड़ों properties हैं, लेकिन आप खुद को बार-बार वही कुछ मुट्ठी भर (color, background, margin, padding, font-size) इस्तेमाल करते पाएँगे।

Warning: हर value हर property के साथ काम नहीं करती; एक color property को color value चाहिए होती है, 10px जैसी length नहीं।

उदाहरण: Properties and Values

css

<style>
p {
  color: red;
  padding: 16px;
}
</style>
<p>color: red and padding: 16px are property:value pairs</p>

एक ही Rule में कई Declarations

एक ही selector एक साथ कई properties को control कर सकता है, बस उसी declaration block के अंदर कई declarations list करके, जिनमें से हर एक semicolon से खत्म होता है।

Declarations के बीच semicolon भूल जाना bugs का एक आम कारण है, क्योंकि browser यह गलत समझ सकता है कि एक declaration कहाँ खत्म होता है और अगला कहाँ शुरू होता है।

Note: जैसे ही किसी rule में एक या दो से ज़्यादा properties हो जाएँ, हर declaration को अपनी अलग line पर रखें, इससे rules बाद में पढ़ने और edit करने में आसान रहते हैं।

Warning: Declarations के बीच semicolon भूल जाना browser को यह गलत समझने पर मजबूर कर सकता है कि एक declaration कहाँ खत्म होता है और अगला कहाँ शुरू होता है।

उदाहरण: Multiple Declarations in One Rule

css

<style>
p {
  color: green;
  font-size: 18px;
  padding: 10px;
}
</style>
<p>Three declarations, each ended with a semicolon</p>

Selectors को Group करना

जब कई अलग-अलग selectors को बिल्कुल एक जैसी styling चाहिए होती है, तो आप उन्हें बार-बार वही declaration block repeat करने के बजाय commas से एक साथ group कर सकते हैं। इससे कई अलग-अलग selectors के नीचे एक ही block को copy-paste करने की repetition और maintenance की परेशानी बच जाती है।

Note: Selectors को group करना आपके CSS को छोटा रखता है और एक नज़र में साफ़ कर देता है कि कौन-से elements एक जैसी styling share करते हैं।

Warning: Selectors के बीच comma का मतलब है 'इन सभी पर लागू करो', जबकि कोई comma न होना (सिर्फ space) कुछ अलग मतलब रखता है: एक descendant relationship।

उदाहरण: Grouping Selectors

css

<style>
h1, h2, h3 {
  color: navy;
}
</style>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Introduction Next Lesson → CSS Selectors