CSS Syntax एक fixed structure होता है जिसकी मदद से हम HTML elements पर style apply करते हैं।
हर CSS code एक rule के form में लिखा जाता है।
CSS Rule Structure
selector {
property: value;
}
CSS Syntax के Parts
1. Selector
Selector वह HTML element होता है जिस पर CSS apply करनी होती है।
p {
color: red;
}
यहाँ p एक selector है जो सभी <p> elements को select करता है।
2. Property
Property बताती है कि हम क्या change करना चाहते हैं।
Example properties:
colorbackground-colorfont-sizemargin
p {
color: blue;
}
3. Value
Value property की setting होती है।
p {
color: green;
}
यहाँ:
- property →
color - value →
green
4. Declaration
Property + Value को मिलाकर declaration कहते हैं।
color: red;
5. Declaration Block
Curly braces { } के अंदर लिखी सभी declarations को declaration block कहते हैं।
p {
color: red;
font-size: 18px;
}
Multiple Declarations
एक selector के अंदर multiple properties लिख सकते हैं।
h1 {
color: blue;
text-align: center;
font-size: 32px;
}
CSS Semicolon का Rule
हर declaration के end में semicolon (;) लगाना जरूरी होता है।
p {
color: red;
font-size: 16px;
}
अगर semicolon miss हुआ तो CSS सही से काम नहीं करेगी।
CSS Curly Braces
{→ declaration block start}→ declaration block end
p {
color: red;
}
CSS Whitespace और Formatting
CSS में extra space या new line से output पर कोई फर्क नहीं पड़ता।
p { color:red; }
और
p {
color: red;
}
दोनों same काम करेंगे।
CSS Comments Syntax
CSS में comments लिखने के लिए /* */ use होता है।
/* This is a CSS comment */
p {
color: red;
}CSS Syntax with HTML Example
HTML Code
<p>This is a paragraph</p>
CSS Code
p {
color: blue;
font-size: 18px;
}
इस CSS से paragraph का color blue और text size बड़ा हो जाएगा।
Common CSS Syntax Errors
1. Semicolon missing
p {
color: red
font-size: 16px;
}
2. Wrong property name
p {
textcolor: red;
}
सही property है color
Summary
- CSS syntax एक rule-based structure है
- Selector बताता है किस element पर style लगेगी
- Property और value मिलकर declaration बनाते हैं
- Semicolon और curly braces जरूरी होते हैं
- CSS comments
/* */से लिखे जाते हैं