BitWithBite
Full-Stack Worksheet
🎨 CSS Selectors & Specificity
SCORE___ / 20
NameClassDate
After this worksheet you can
Order specificity levelsPredict which rule winsUse class/ID selectorsAvoid overusing !important📚 Quick Recap
🎯 What you'll practice: The specificity hierarchy and predicting cascade winners.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Which has the highest specificity (excluding !important)?
2Between p { } and .text { }, which wins if both apply?
3!important should be:
4An inline style attribute beats:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5An ID selector is written with a symbol.
6A class selector is written with a symbol.
7Order these from lowest to highest specificity: .class, element, #id, inline style.
8If p { color: blue; } and #main { color: green; } both target the same <p id="main">, what color wins and why?
9Why is !important considered a last resort rather than a normal styling tool?
🚀 Section C · Challenge ● CHALLENGE 5
10Three rules all target the same button: button{}, .btn-primary{}, #submit-btn{}. Explain which wins and how you'd redesign the CSS to avoid this conflict entirely.
💭 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-C 2-B 3-B 4-B | 5 = # 6 = . 7 = element, .class, #id, inline style 8 = Green wins — an ID selector (1-0-0) has higher specificity than an element selector (0-0-1) regardless of source order 9 = It overrides the entire specificity system, making future overrides very difficult and hiding the real cascade — relying on it habitually signals unclear CSS architecture | 10 = #submit-btn wins (highest specificity of the three) — to avoid the conflict, use consistent class-based styling only and reserve IDs for JS hooks/anchors, not for styling.