CSS Syntax in Hindi

CSS Syntax

CSS Syntax यह बताता है कि CSS में किसी HTML element को style करने के लिए code किस तरह लिखा जाता है। CSS का basic syntax समझना जरूरी है क्योंकि इसी structure की मदद से हम HTML elements का color, size, spacing, background, border, font और layout आदि control करते हैं।

CSS का एक basic rule मुख्य रूप से Selector, Property और Value से मिलकर बनता है। Property और Value मिलकर एक Declaration बनाते हैं, जबकि सभी declarations को curly braces { } के अंदर लिखा जाता है।

CSS का Basic Syntax

CSS का सामान्य syntax इस प्रकार होता है:

ऊपर दिए गए code में p selector है। color और font-size properties हैं, जबकि blue और 18px उनकी values हैं।

1. Selector

Selector CSS rule का वह हिस्सा होता है जो बताता है कि style किस HTML element या elements पर apply करनी है।

अगर हमें सभी paragraph elements को style करना है, तो हम p selector का उपयोग कर सकते हैं। इसी तरह heading के लिए h1, सभी divisions के लिए div और links के लिए a selector इस्तेमाल किया जा सकता है।

इस example में h1 selector heading पर और p selector paragraph पर style apply कर रहा है। एक CSS file में अलग-अलग selectors के लिए कई rules लिखे जा सकते हैं।

2. Curly Braces { }

Selector के बाद curly braces { } का उपयोग किया जाता है। इन braces के अंदर उस selector के लिए सभी CSS declarations लिखी जाती हैं।

उदाहरण के लिए:

ऊपर { के बाद CSS declarations शुरू होती हैं और } पर declaration block समाप्त होता है।

3. Property

Property यह बताती है कि HTML element के किस design feature को change करना है। CSS में बहुत सारी properties उपलब्ध हैं, जैसे color, background-color, font-size, margin, padding, border आदि।

उदाहरण के लिए अगर हमें text का color बदलना है, तो color property का उपयोग करेंगे। अगर text का size बदलना है, तो font-size property का उपयोग करेंगे।

4. Value

Value यह बताती है कि property को किस value या setting के साथ apply करना है। हर property की value उसके काम के अनुसार अलग हो सकती है।

उदाहरण के लिए color: blue; में blue value है और font-size: 20px; में 20px value है।

5. Colon : का उपयोग

CSS में property और उसकी value के बीच colon (:) लगाया जाता है। यह browser को बताता है कि कौन-सी value किस property से संबंधित है।

उदाहरण:

color: blue;

यहाँ color property है, : colon है और blue उसकी value है।

6. Semicolon ; का उपयोग

एक CSS declaration के अंत में सामान्यतः semicolon (;) लगाया जाता है। जब एक ही selector के अंदर multiple properties लिखी जाती हैं, तो प्रत्येक declaration को अलग करने के लिए semicolon उपयोग किया जाता है।

ऊपर तीन अलग-अलग declarations हैं। प्रत्येक declaration के बाद semicolon लगाया गया है। इससे CSS code पढ़ने और maintain करने में भी आसानी होती है।

Multiple Properties का उपयोग

एक ही selector के अंदर हम एक से अधिक properties लिख सकते हैं। इससे किसी HTML element पर कई अलग-अलग styles एक साथ apply की जा सकती हैं।

इस example में h2 element पर एक साथ कई properties apply की गई हैं। इससे heading का text color, background, font size, spacing और alignment सभी control किए जा रहे हैं।

CSS में Multiple Selectors

अगर एक जैसी style कई HTML elements पर apply करनी हो, तो selectors को comma के द्वारा एक साथ लिखा जा सकता है। इससे समान CSS rule को बार-बार लिखने की जरूरत कम हो जाती है।

ऊपर h1, h2, p तीन selectors हैं। इन तीनों पर एक ही CSS rule apply किया जाएगा।

CSS Comments

CSS में comments लिखने के लिए /* */ syntax का उपयोग किया जाता है। Comments browser द्वारा style के रूप में apply नहीं किए जाते। इनका उपयोग code को समझाने या किसी section के बारे में note लिखने के लिए किया जा सकता है।

Complete CSS Syntax Example

अब नीचे एक complete example दिया गया है जिसमें selector, multiple properties, values, comments और multiple selectors को एक साथ use किया गया है। इससे CSS syntax का पूरा structure आसानी से समझा जा सकता है।

इस complete example में h1, h2, p और .box selectors का उपयोग किया गया है। प्रत्येक selector के अंदर अलग-अलग properties और values दी गई हैं।

उदाहरण के लिए color: #333; में color property है और #333 उसकी value है। इसी तरह font-size: 18px; में font-size property और 18px value है।

इस प्रकार CSS का basic syntax काफी simple है: Selector → Curly Braces → Property → Colon → Value → Semicolon। इसी basic structure को समझने के बाद आप CSS की अलग-अलग properties और selectors को आसानी से सीख सकते हैं।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---