CSS Syntax :
- CSS रूल में एक Selector और एक Declaration Block होता है |
- Selector उस HTML Element को बताता है जिसे आप Style करना चाहते हैं।
- Declaration Block में एक या ज़्यादा declaration होते हैं जो Semicolon (;) से अलग किए जाते हैं।
- हर Declaration में एक CSS Property का नाम और एक Value होती है, जो colon से अलग किए जाते हैं।
- कई CSS Declaration Semicolon से अलग किए जाते हैं, और Declaration Block Curly Brackets के अंदर होते हैं।
Basic Syntax :
selector {
property: value;
}Example :
h1 {
color: blue;
font-size: 30px;
}Explained :
| Parts | Meaning |
|---|---|
h1 | Selector (जिस element को style करना है) |
color | Property (क्या बदलना है) |
blue | Value (किस प्रकार बदलना है) |
{ } | CSS Declaration Block |
; | प्रत्येक property के बाद लगाया जाता है |
CSS Syntax के मुख्य भाग
1. Selector
Selector यह बताता है कि किस HTML element पर CSS लागू होगी।
Example :
p {
color: red;
}Types of Selectors :
1. Element Selector
Element Selector का use सभी h1 को select करता है।
Example :
h1 {
color: green;
}2. ID Selector
ID Selector CSS का एक selector है जिसका उपयोग किसी एक विशेष HTML element को style करने के लिए किया जाता है।
ID Selector को CSS में # (hash symbol) से लिखा जाता है।
Syntax :
#id-name {
property: value;
}3. Class Selector
Class Selector CSS का एक selector है जिसका उपयोग एक या एक से अधिक HTML elements को एक जैसी styling देने के लिए किया जाता है।
Class Selector को CSS में . (dot) से लिखा जाता है।
Syntax :
.class-name {
property: value;
}4. Universal Selector
Universal Selector CSS का एक ऐसा selector है जो वेब पेज के सभी HTML elements को select करता है।
इसे CSS में * (asterisk/star symbol) से लिखा जाता है।
Syntax :
* {
property: value;
}CSS के Basic Concepts
1. CSS कैसे काम करता है?
Process :
HTML File
↓
CSS File
↓
Browser CSS को Read करता है
↓
Style Apply करता है
↓
Styled Web Page दिखाई देता है2. CSS लगाने के तरीके (CSS Types)
- Inline CSS
- Internal CSS
- External CSS
3. CSS Comments
CSS Comment का उपयोग CSS code के अंदर notes या explanation लिखने के लिए किया जाता है।
Browser CSS Comment को ignore कर देता है, यानी comment का webpage के design पर कोई प्रभाव नहीं पड़ता।
Syntax :
/* Comment */4. CSS File Structure
CSS file structure का मतलब है कि आप अपनी CSS file को सही तरीके से sections में organize करके लिखें, ताकि code clean, readable और maintainable रहे।
Basic File Structure :
/* Reset / Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Style */
body {
font-family: Arial;
background-color: #f5f5f5;
}
/* Header */
header {
background-color: black;
color: white;
padding: 20px;
}
/* Main Content */
.main {
padding: 20px;
}
/* Footer */
footer {
background-color: gray;
text-align: center;
padding: 10px;
}