🎨 Days 1–6 – CSS की नींव · दिन 02
दिन 2: Colours, Units, Backgrounds और Gradients
⏱ 80 min📶 Beginner🎯 100% self-study
दिन 2 / 20
✅ आज आप सीखेंगे
- Colour formats: names, hex, rgb(), hsl() और transparency
- एक-सा रहने वाला brand palette बनाना
- Units: px, %, em, rem, vw, vh – और कब कौन
- Background colour, image, size, position और overlays
- Linear और radial gradients
🏢 असली दुनिया में
Client की असली शिकायत: “मेरे phone पर banner का text पढ़ा नहीं जाता और photo अजीब ढंग से कटती है।” समस्या हमेशा यही तीन होती हैं – text colour और background का contrast, fixed pixel sizes, और cover/position के बिना background image। आज आप तीनों ठीक करना सीखेंगे।
Colours लिखना
HTML + CSS
<style>
.sw { display:inline-block; width:150px; padding:14px 8px; margin:4px; color:white; border-radius:8px; font-size:13px; }
.a { background: tomato; } /* named colour */
.b { background: #e34f26; } /* hex: #RRGGBB */
.c { background: rgb(22, 163, 74); } /* red, green, blue */
.d { background: hsl(220, 80%, 50%); } /* hue, sat, light */
.e { background: rgb(0 0 0 / 60%); } /* 60% opaque black */
</style>
<div class="sw a">tomato</div>
<div class="sw b">#e34f26</div>
<div class="sw c">rgb(22,163,74)</div>
<div class="sw d">hsl(220,80%,50%)</div>
<div class="sw e">rgb(0 0 0 / 60%)</div>| Format | उदाहरण | कब |
|---|---|---|
| Hex | #e34f26, छोटा #fff | Designs (Figma, logos) से brand colours copy करना |
| rgb() / rgba | rgb(0 0 0 / 50%) | पारदर्शी overlays और shadows |
| hsl() | hsl(24 90% 50%) | सिर्फ़ L बदलकर एक colour के हल्के/गहरे shades |
| Names | white, tomato | जल्दी tests |
| currentColor | border-color: currentColor | Text colour से अपने-आप मेल |
HTML + CSS
<style>
.shade { display:inline-block; width:90px; height:60px; margin:3px; border-radius:8px; color:#111; font-size:12px; padding:4px; }
.s1 { background: hsl(24 90% 95%); }
.s2 { background: hsl(24 90% 80%); }
.s3 { background: hsl(24 90% 60%); }
.s4 { background: hsl(24 90% 45%); color:white; }
.s5 { background: hsl(24 90% 25%); color:white; }
</style>
<div class="shade s1">L 95%</div><div class="shade s2">L 80%</div><div class="shade s3">L 60%</div><div class="shade s4">L 45%</div><div class="shade s5">L 25%</div>💡 HTML course का contrast नियम
Text का background से contrast कम से कम 4.5 : 1 होना चाहिए। #f59e0b (हल्का नारंगी) पर सफ़ेद text fail होता है; #c2410c (गहरा नारंगी) पर pass। DevTools colour swatch पर click करने पर ratio दिखाता है।
Units: px, %, em, rem, vw, vh
| Unit | किसके सापेक्ष | कब |
|---|---|---|
| px | Fixed screen pixel | Borders, shadows, छोटी fixed चीज़ें |
| % | Parent element का size | Container के अंदर widths |
| em | इसी element का font size | Button text के साथ बढ़ने वाला padding |
| rem ⭐ | Root (html) font size, आमतौर पर 16px | Font sizes और spacing – user की browser setting का सम्मान |
| vw / vh | Viewport width / height का 1% | Full-screen heroes, fluid headings |
| ch | “0” की चौड़ाई | पढ़ने लायक line length: max-width: 65ch |
HTML + CSS
<style>
.box { background:#dbeafe; margin:6px 0; padding:6px; }
.px { width: 300px; }
.pct { width: 60%; }
.vw { width: 50vw; }
.btn-sm { font-size: 0.8rem; padding: 0.5em 1em; background:#264de4; color:#fff; border:0; border-radius:6px; }
.btn-lg { font-size: 1.3rem; padding: 0.5em 1em; background:#264de4; color:#fff; border:0; border-radius:6px; }
</style>
<div class="box px">width: 300px (never changes)</div>
<div class="box pct">width: 60% of the parent</div>
<div class="box vw">width: 50vw (half the window)</div>
<button class="btn-sm">Small (em padding)</button>
<button class="btn-lg">Large – padding grows too</button>🧠 Font sizes के लिए rem क्यों?
कई बुज़ुर्ग users phone या browser में बड़ा default font रखते हैं। rem वाले sizes उस setting के साथ बढ़ते हैं; px वाले उसे नज़रअंदाज़ करते हैं। Default में 1rem = 16px, तो 1.5rem = 24px।
Backgrounds और overlay trick
HTML + CSS
<style>
.hero {
min-height: 220px;
padding: 24px;
color: white;
border-radius: 14px;
background:
linear-gradient(rgb(0 0 0 / 55%), rgb(0 0 0 / 20%)), /* dark overlay on top */
url("images/ghewar.webp") center / cover no-repeat; /* photo underneath */
}
.hero h1 { margin: 0; font-size: 2rem; }
</style>
<section class="hero">
<h1>Teej Special: Malai Ghewar</h1>
<p>Fresh every morning · ₹650/kg</p>
</section>| Property | क्या करती है |
|---|---|
| background-image: url(...) | तस्वीर लगाती है |
| background-size: cover | Box भरती है, बाक़ी काटती है – खिंचाव नहीं ⭐ |
| background-size: contain | पूरी image दिखाती है, ख़ाली जगह छूट सकती है |
| background-position: center | कटने पर कौन सा हिस्सा दिखे |
| background-repeat: no-repeat | Tile होना रोकती है |
| background (shorthand) | एक line में url(...) center / cover no-repeat |
Gradients – रंगों से बनी images
HTML + CSS
<style>
.g { height:70px; border-radius:10px; margin:6px 0; color:white; padding:8px; font-weight:600; }
.g1 { background: linear-gradient(90deg, #e34f26, #f59e0b); }
.g2 { background: linear-gradient(135deg, #264de4 0%, #06b6d4 100%); }
.g3 { background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309); color:#111; }
.g4 { background: linear-gradient(to right, #16a34a 0 33%, white 33% 66%, #f97316 66%); color:#111; }
</style>
<div class="g g1">linear 90deg – Diwali orange</div>
<div class="g g2">linear 135deg – tech blue</div>
<div class="g g3">radial – a glowing diya</div>
<div class="g g4">hard stops – flag stripes</div>असली fix: mobile पर न पढ़ा जाने वाला banner
पहले (client का code)
- चमकीली photo पर color: #fbbf24
- font-size: 40px; width: 900px
- background-size: 100% 100% → खिंची मिठाई
- Overlay नहीं
बाद में
- color: white + गहरा gradient overlay
- font-size: 2rem; max-width: 100%
- background: url(..) center / cover
- DevTools में contrast ≥ 4.5 : 1 जाँचा
🏅 आज के Job Skills
✔ Hex, rgb और hsl में transparency के साथ colours✔ hsl shades से brand palette✔ सही unit: text के लिए rem, widths के लिए % / vw✔ Overlays और gradients से image banners
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: hsl और rem से 3-colour button set (primary, success, danger) बनाएँ।
Solution देखें
Task 2: kaju-katli photo (images/kaju-katli.webp), गहरे overlay और सफ़ेद text वाला full-width banner बनाएँ।
Solution देखें
Task 3: Hard-stop striped gradient से “sale” ribbon बनाएँ।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. कौन सा unit user की browser font setting मानता है?
rem root font size के सापेक्ष है।
2. बिना खिंचाव box भरने वाला background-size?
यह बिगाड़ने की जगह काटता है।
3. rgb(0 0 0 / 50%) है…
/ के बाद alpha है।
4. hsl(24 90% 50%) का हल्का shade बनाने के लिए बदलें…
L बढ़ाएँ।
5. 50vw का मतलब…
Viewport units।
Interview corner
💼 Interview Corner
rem बनाम em – क्या फ़र्क है?
rem root html font size के सापेक्ष है, इसलिए हर जगह अनुमानित। em मौजूदा element के font size के सापेक्ष है, इसलिए nested elements में गुणा होता जाता है – component के अपने text के साथ बढ़ने वाले padding के लिए उपयोगी।
Photo के ऊपर पढ़ने लायक text कैसे रखें?
उसी background declaration में image के ऊपर आधा-पारदर्शी गहरा (या हल्का) gradient रखें, background-size: cover और सही position लें, और contrast जाँचें; चाहें तो हल्का text-shadow।
सारांश
- Brand colours के लिए hex, overlays के लिए rgb/alpha, shades के लिए hsl।
- Text व spacing के लिए rem; widths के लिए %, vw; borders के लिए px।
- background: overlay-gradient, url() center / cover no-repeat।
- Gradients मुफ़्त “images” हैं – linear, radial, hard stops।
➡️ आगे
Day 3: typography – Google Fonts, font sizes, line height, letter spacing और पढ़ने लायक text।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
अच्छे colour palettes कहाँ मिलें?
Brand logo के colour से शुरू करें, फिर hsl से shades बनाएँ। coolors.co जैसे tools मदद करते हैं, पर contrast हमेशा जाँचें।
क्या px बिल्कुल इस्तेमाल करें?
हाँ – borders, shadows और छोटी चीज़ों के लिए। Text और spacing के लिए rem, layout widths के लिए % / vw / fr।
