🎨 Days 1–6 – CSS Foundations · Day 02
Day 2: Colours, Units, Backgrounds & Gradients
⏱ 80 min📶 Beginner🎯 100% self-study
Day 2 / 20
✅ Today you will learn
- Colour formats: names, hex, rgb(), hsl() and transparency
- Build a brand palette that stays consistent
- Units: px, %, em, rem, vw, vh – and which one to choose
- Background colour, image, size, position and overlays
- Linear and radial gradients
🏢 In the real world
A real complaint from a client: “On my phone the banner text is unreadable and the photo is cut weirdly.” The problem is always the same three things – text colour vs background contrast, fixed pixel sizes, and a background image without cover/position. Today you learn to fix all three.
Writing 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 | Example | Best for |
|---|---|---|
| Hex | #e34f26, short #fff | Copying brand colours from designs (Figma, logos) |
| rgb() / rgba | rgb(0 0 0 / 50%) | Transparent overlays and shadows |
| hsl() | hsl(24 90% 50%) | Making lighter/darker shades of one colour by changing only L |
| Names | white, tomato | Quick tests |
| currentColor | border-color: currentColor | Match the text colour automatically |
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>💡 Contrast rule from the HTML course
Text must have at least 4.5 : 1 contrast with its background. White text on #f59e0b (light orange) fails; on #c2410c (dark orange) it passes. DevTools shows the ratio when you click a colour swatch.
Units: px, %, em, rem, vw, vh
| Unit | Relative to | Use for |
|---|---|---|
| px | Fixed screen pixel | Borders, shadows, small fixed details |
| % | Parent element size | Widths inside a container |
| em | Font size of this element | Padding that grows with a button’s text |
| rem ⭐ | Root (html) font size, usually 16px | Font sizes and spacing – respects the user’s browser setting |
| vw / vh | 1% of viewport width / height | Full-screen heroes, fluid headings |
| ch | Width of “0” | Readable 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>🧠 Why rem for font sizes?
Many older users set a larger default font in their phone or browser. Sizes in rem grow with that setting; sizes in px ignore it. 1rem = 16px by default, so 1.5rem = 24px.
Backgrounds and the 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 | What it does |
|---|---|
| background-image: url(...) | Sets the picture |
| background-size: cover | Fills the box, crops the extra – no stretching ⭐ |
| background-size: contain | Shows the whole image, may leave empty space |
| background-position: center | Which part stays visible when cropped |
| background-repeat: no-repeat | Stops tiling |
| background (shorthand) | url(...) center / cover no-repeat in one line |
Gradients – images made of colour
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>Real fix: the unreadable mobile banner
Before (client’s code)
- color: #fbbf24 on a bright photo
- font-size: 40px; width: 900px
- background-size: 100% 100% → stretched sweets
- No overlay
After
- color: white + dark gradient overlay
- font-size: 2rem; max-width: 100%
- background: url(..) center / cover
- Contrast ≥ 4.5 : 1 checked in DevTools
🏅 Job skills unlocked today
✔ Write colours in hex, rgb and hsl with transparency✔ Create a brand palette with hsl shades✔ Choose the right unit: rem for text, % / vw for widths✔ Build image banners with overlays and gradients
Practice tasks
🏋️ Practice – do it yourself
Task 1: Make a 3-colour button set (primary, success, danger) using hsl and rem.
Show solution
Task 2: Build a full-width banner with the kaju-katli photo (images/kaju-katli.webp), a dark overlay and white text.
Show solution
Task 3: Create a “sale” ribbon with a hard-stop striped gradient.
Quick quiz
🧠 Quick Quiz – test yourself
1. Which unit respects the user’s browser font setting?
rem is relative to the root font size.
2. background-size that fills the box without stretching?
It crops instead of distorting.
3. rgb(0 0 0 / 50%) is…
The value after / is alpha.
4. To make a lighter shade of hsl(24 90% 50%) change…
Raise L.
5. 50vw means…
Viewport units.
Interview corner
💼 Interview Corner
rem vs em – what is the difference?
rem is relative to the root html font size, so it is predictable everywhere. em is relative to the current element’s font size, so it compounds in nested elements – handy for padding that scales with a component’s own text.
How do you put readable text on top of a photo?
Layer a semi-transparent dark (or light) gradient over the image in the same background declaration, use background-size: cover and a sensible position, and verify contrast; optionally add a subtle text-shadow.
Summary
- Hex for brand colours, rgb/alpha for overlays, hsl for shades.
- rem for text and spacing; %, vw for widths; px for borders.
- background: overlay-gradient, url() center / cover no-repeat.
- Gradients are free “images” – linear, radial, hard stops.
➡️ Next
Day 3: typography – Google Fonts, font sizes, line height, letter spacing and readable text.
Frequently Asked Questions
Where do I get good colour palettes?
Start from the brand logo colour, then make shades with hsl. Tools like coolors.co help, but always check contrast.
Should I use px at all?
Yes – for borders, shadows and tiny details. Use rem for text and spacing, % / vw / fr for layout widths.
