CSS Notes in Hindi: यह गाइड आपको CSS के basics से लेकर advanced concepts तक आसान भाषा में समझाएगा।
आप यहाँ Types of CSS, Selectors और Properties को examples के साथ step-by-step सीखेंगे।
Day 1: CSS Introduction
CSS क्या है?
CSS (Cascading Style Sheets) एक styling language है जिसका उपयोग HTML webpage को design करने के लिए किया जाता है।
क्यों जरूरत होती है?
HTML सिर्फ structure बनाता है, लेकिन CSS उसे सुंदर और आकर्षक बनाता है।
<p style="color: red;">Hello World</p>CSS क्या-क्या कर सकता है?
Text का color बदल सकता है
Font style और size बदल सकता है
Background color और image लगा सकता है
Layout (spacing, margin, padding) control कर सकता है
Important Points:
CSS = Design + Style
HTML = Structure
दोनों मिलकर webpage complete बनाते हैं
Homework / Practice
एक simple HTML page बनाइए
उसमें 2 paragraph लिखिए
दोनों का color अलग-अलग करिए (inline CSS से)
Day 2: CSS Syntax
CSS Syntax क्या है?
CSS Syntax वह नियम (rule) है जिससे हम HTML elements पर style apply करते हैं।
Basic Structure:
CSS हमेशा इस format में लिखा जाता है:
selector {
property: value;
}समझिए Parts को:
Selector → किस HTML element पर style लगेगा (जैसे p, h1)
Property → क्या बदलना है (जैसे color, font-size)
Value → कैसे बदलना है (जैसे red, 20px)
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Important Rules:
हर property के बाद semicolon (;) लगाना जरूरी है
CSS हमेशा { } curly brackets के अंदर लिखा जाता है
एक selector के अंदर multiple properties लिख सकते हैं
Important Points:
CSS Syntax सीखना बहुत जरूरी है
इसी से पूरा design control होता है
गलती होने पर style apply नहीं होता
Practice / Homework
h1 का color red करिए
p का font-size 20px करिए
background color yellow लगाइए
Day 3: CSS Selectors
CSS Selectors क्या है?
CSS Selectors का उपयोग HTML elements को select करने के लिए किया जाता है ताकि उन पर style apply किया जा सके।
Types of CSS Selectors:
1. Element Selector
यह सीधे HTML tag को select करता है
p {
color: red;
}2. Class Selector
यह class के आधार पर element को select करता है
.myclass {
color: blue;
}<p class="myclass">Hello</p>3. ID Selector
यह unique id के आधार पर element को select करता है
#myid {
color: green;
}#myid {
color: green;
}Important Points:
Class selector (.) से शुरू होता है
ID selector (#) से शुरू होता है
ID हमेशा unique होता है
एक page में multiple class use कर सकते हैं
Practice / Homework
एक paragraph बनाइए और उसे class से blue color दीजिए
एक heading बनाइए और उसे id से red color दीजिए
सभी p tags का font-size 18px करिए
