BitWithBite
HTML & CSS Worksheet
🎨 Modern CSS & Best Practices
SCORE___ / 20
NameClassDate
After this worksheet you can
Organise CSS sensiblyNaming conventionsShorthand propertiesDebug with DevTools📚 Quick Recap
You've mastered the fundamentals. Now we explore the cutting edge — modern CSS selectors like :is(), :where(), and :has(), container queries that respond to parent width instead of viewport, native CSS nesting, and the performance & accessibility habits that separate pros from beginners. By the end you'll write CSS that is leaner, smarter, and future-proof.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1BEM is a:
2margin: 8px 16px sets:
3Inspect styles live with:
4!important should be:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5BEM: block__element--.
6Group related rules with for readability.
7Name a card and its title in BEM.
8Why avoid deep selectors like div ul li a span?
9Two DevTools features for CSS debugging?
🚀 Section C · Challenge ● CHALLENGE 5
10When is !important okay?
💭 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 modifier 6 comments/sections 7 = .card and .card__title (variant .card--dark) 8 = Fragile, high specificity, slow to maintain 9 = Inspect computed styles; toggle rules live; box-model view | 10 = Overriding third-party styles you cannot edit (sparingly)