BitWithBite
HTML & CSS Worksheet
🎨 Introduction to CSS
SCORE___ / 20
NameClassDate
After this worksheet you can
Three ways to add CSSSelectors and declarationsClasses vs idsColors and fonts📚 Quick Recap
🎯 What you'll learn: What CSS is and how it works, the anatomy of a CSS rule, all ways to add CSS to HTML, type/class/ID/attribute selectors, combinators, pseudo-classes and pseudo-elements, the cascade and inheritance, and specificity — how the browser decides which style wins.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Best practice CSS location:
2A CSS rule = selector + :
3.card selects by:
4#nav selects by:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Link a stylesheet with <link rel="stylesheet" href="styles.">.
6property: value; pairs are .
7Rule: all p tags dark gray text.
8Class vs id in one line?
9Three ways to attach CSS?
🚀 Section C · Challenge ● CHALLENGE 5
10Why prefer external CSS?
💭 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 css 6 declarations 7 = p { color: #333; } 8 = class = reusable; id = unique single element 9 = External file, <style> block, inline style attr | 10 = Reuse across pages, caching, separation of concerns