🎨 Days 1–6 – CSS की नींव · दिन 01
दिन 1: CSS क्या है? Syntax, Linking और Basic Selectors
⏱ 70 min📶 Beginner🎯 100% self-study
दिन 1 / 20
✅ आज आप सीखेंगे
- CSS क्या करता है और हर website को क्यों चाहिए
- CSS rule की बनावट
- Inline, internal और external CSS – professionals कौन सा लेते हैं
- Element, class, ID, group और universal selectors
- असली client के लिए आपका पहला styled page
🏢 असली दुनिया में
Mr. Vikas Sharma को आपकी बनाई Sharma Sweets की HTML website पसंद आई, पर वे कहते हैं: “चलती तो है, पर 1995 के सरकारी notice जैसी दिखती है। मेरे competitor की site brand जैसी दिखती है।” Content सही है – कमी design की है। वो design layer CSS है, और अगले 20 दिनों में आप वो इंसान बनेंगे जो इसे deliver कर सके।
HTML ढाँचा है, CSS रूप
CSS के बिना
- काला Times New Roman text
- नीले underline वाले links
- सब ऊपर से नीचे ढेर
- Phone और laptop पर एक जैसा
CSS के साथ
- Brand colours और fonts
- Buttons, cards, shadows
- साथ-साथ layouts (Flexbox, Grid)
- हर screen के हिसाब से (responsive)
HTML + CSS
<style>
.offer {
background: #fff7ed;
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 16px;
max-width: 320px;
}
.offer h2 { color: #c2410c; margin: 0 0 6px; }
.offer a {
display: inline-block;
background: #e34f26;
color: white;
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
}
</style>
<div class="offer">
<h2>Diwali Special 🪔</h2>
<p>Flat 10% off on gift boxes above ₹2,000.</p>
<a href="#">Order now</a>
</div>CSS rule की बनावट
CSS
selector { /* WHO to style */
property: value; /* WHAT to change : HOW */
property: value; /* each line ends with ; */
}
h1 {
color: #c2410c;
font-size: 32px;
}| हिस्सा | उदाहरण | मतलब |
|---|---|---|
| Selector | h1 | Rule किन elements पर लगेगा |
| Declaration block | { … } | उस selector की सारी styles |
| Property | color | क्या बदलना है |
| Value | #c2410c | नई setting |
| Comment | /* … */ | इंसानों के लिए notes – browser नज़रअंदाज़ करता है |
⚠️ Beginners की सबसे आम ग़लती
छूटा semicolon या brace अगली line को चुपचाप तोड़ देता है। कोई style “काम नहीं करती” तो पहले उसके ऊपर वाली line देखें। VS Code ऐसी ग़लतियों को लाल underline करता है।
CSS लिखने की तीन जगहें
| तरीक़ा | कैसे | कब |
|---|---|---|
| Inline | <p style="color:red"> | सिर्फ़ जल्दी test, e-mail templates |
| Internal | head में <style> … </style> | एक-page demos (जैसे इस course के examples) |
| External ⭐ | <link rel="stylesheet" href="css/style.css"> | हर असली website – एक file सब pages style करती है और browser उसे cache करता है |
Folder + HTML – linking an external stylesheet
sharma-sweets/
├── index.html
├── menu.html
└── css/
└── style.css
<!-- in the <head> of EVERY page -->
<link rel="stylesheet" href="css/style.css">💡 यह course examples कैसे दिखाता है
हर example एक box में रखने के लिए हम CSS को <style> के अंदर रखते हैं। अपने projects में इसे css/style.css में ले जाएँ – CSS बिल्कुल वही रहती है।
पाँच basic selectors
HTML + CSS
<style>
p { color: #374151; } /* element: every <p> */
.price { color: #16a34a; font-weight: bold; } /* class: reusable */
#todays-special { background: #fef3c7; padding: 6px; } /* ID: one */
h3, h4 { color: #c2410c; } /* group: same style, many */
* { margin-top: 4px; } /* universal: everything */
</style>
<h3>Kaju Katli</h3>
<p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p>
<h4>Ghewar</h4>
<p id="todays-special">Today’s special – fresh malai ghewar!</p>
<p>Besan ladoo <span class="price">₹500/kg</span></p>| Selector | Syntax | किसे चुनता है | नियम |
|---|---|---|---|
| Element | p | सभी <p> | Tags की base styles |
| Class | .price | class="price" वाले सब | ⭐ लगभग हर styling के लिए |
| ID | #todays-special | उस id वाला एक element | Styling में कम – बहुत ताक़तवर, दोबारा उपयोग नहीं |
| Group | h3, h4 | दोनों | Rules दोहराने से बचें |
| Universal | * | सब कुछ | सिर्फ़ resets के लिए (Day 4) |
HTML + CSS
<style>
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 99px;
font-size: 13px;
color: white;
background: #6b7280;
}
.badge.veg { background: #16a34a; } /* both classes */
.badge.bestseller { background: #e34f26; }
</style>
<p>Kaju Katli <span class="badge veg">Pure Veg</span> <span class="badge bestseller">Bestseller</span></p>
<p>Soan Papdi <span class="badge veg">Pure Veg</span></p>
<p>Gift Box <span class="badge">New</span></p>DevTools में CSS live देखें और बदलें
- 1किसी element पर right-click → Inspect
- 2Styles pane हर लागू rule, file का नाम और line number दिखाता है
- 3किसी value (जैसे colour) पर click करके बदलें – page तुरंत बदलता है
- 4कटी हुई lines = किसी दूसरे rule ने override किया (Day 5 में कारण)
- 5Final values style.css में copy करें – refresh पर DevTools के बदलाव मिट जाते हैं
🏅 आज के Job Skills
✔ CSS क्या करता है और rule कैसे बनता है, समझाना✔ हर page से external stylesheet जोड़ना✔ Element, class, ID, group और universal selectors✔ DevTools में CSS देखना और बदलना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: Shop notice style करें: हल्का पीला background, नारंगी border, गोल कोने और गहरा-नारंगी heading।
Solution देखें
Task 2: .veg (हरा) और .new (नीला) badge classes बनाकर एक item पर दोनों लगाएँ।
Task 3: कोई पसंदीदा website खोलें, उसकी main heading Inspect करें और DevTools में colour व font-size बदलें। Screenshot लें।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. CSS नियंत्रित करता है…
HTML = ढाँचा, CSS = रूप।
2. 10-page site के लिए सबसे अच्छा तरीक़ा?
सब pages के लिए एक cached file।
3. Class selector का syntax?
Class के लिए dot, ID के लिए hash।
4. एक id कितने elements पर?
IDs अनोखी होती हैं।
5. ऊपर की line बदलने के बाद rule बंद हो गया। संभावित कारण?
Syntax error आगे का हिस्सा तोड़ता है।
Interview corner
💼 Interview Corner
CSS जोड़ने के तीन तरीक़े क्या हैं और कब कौन?
Inline (style attribute) – सिर्फ़ एक-बार tests या HTML e-mails; internal (<style>) – एक-page demos या critical CSS; external (<link>) – standard: दोबारा उपयोगी, cache होने वाला, ज़िम्मेदारियाँ अलग।
Styling के लिए IDs की जगह classes क्यों?
Classes दोबारा उपयोगी हैं और उनकी specificity कम है, इसलिए override करना और जोड़ना आसान। IDs अनोखी और बहुत specific होती हैं, जिससे CSS override करना मुश्किल हो जाता है।
सारांश
- CSS = रूप; rule है selector { property: value; }।
- हर page से जुड़ी external css/style.css लें।
- Classes असली मेहनती हैं; IDs अनोखी चीज़ों के लिए।
- DevTools → Styles में CSS live test करें।
➡️ आगे
Day 2: colours (hex, rgb, hsl), units (px, rem, %, vw), backgrounds और gradients – त्योहारी hero banner बनाएँ।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या पहले HTML आना ज़रूरी है?
हाँ, basics। हमारा 15-day HTML course सही शुरुआत है – यह CSS course वहीं बनाई website को style करता है।
कौन सा editor लें?
VS Code (मुफ़्त) Live Server extension के साथ, ताकि CSS save करते ही page refresh हो।
