BitWithBite
HTML & CSS Worksheet
🎨 CSS Variables & Theming
SCORE___ / 20
NameClassDate
After this worksheet you can
Define --custom propertiesUse var()Theme with :rootSwap themes📚 Quick Recap
CSS custom properties (called CSS variables) are one of the most powerful features in modern CSS. They let you define reusable values once and use them everywhere — and unlike Sass variables, they're live in the browser: you can change them with JavaScript or media queries and every element that uses them updates instantly. This is how professional design systems and dark/light themes are built.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Variables are declared like:
2Use them with:
3Global variables live on:
4var(--x, red) - red is the:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5:root { --accent: ; } (any colour).
6color: var(--);
7Define brand colour once, use on buttons + links.
8Sketch a dark-theme override.
9Why variables beat find-replace colours?
🚀 Section C · Challenge ● CHALLENGE 5
10Can JS change CSS variables?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 #3b82f6 6 accent 7 = :root{--brand:#3b82f6} .btn,a{color:var(--brand)} 8 = [data-theme='dark']{--bg:#111;--text:#eee} 9 = Single source of truth; instant theming; fewer errors | 10 = Yes - el.style.setProperty('--x', value)