Lesson Plan

• Identify and describe each CSS font property (family, size, colour, text‑align, weight, style).
• Apply appropriate font properties to HTML elements using internal CSS and inline styles.
• Evaluate font choices for readability and accessibility, including contrast and size guidelines.
• Demonstrate correct use of semantic tags for bold and italic text.

• Computer with internet access
• Projector and screen
• HTML/CSS editor (e.g., VS Code)
• Sample HTML files and worksheet
• Colour‑contrast checking tool
• Whiteboard and markers

Start with a quick visual comparison of two webpages—one with good typography and one with poor typography—to highlight the impact of font choices. Review the CSS selector basics covered in the previous lesson. Explain that today students will learn how to control font appearance and ensure accessibility.

1. Do‑Now (5’) – Short quiz on CSS selectors and property syntax.
2. Mini‑lecture (10’) – Introduce the six font‑related CSS properties with live code examples.
3. Guided demonstration (12’) – Show how to create an internal stylesheet and apply inline styles for all six properties.
4. Pair activity (15’) – Students edit a sample webpage, choosing appropriate font families, sizes, colours, alignment, bold and italic; use the contrast checker to verify accessibility.
5. Class discussion (8’) – Groups share their choices, discuss readability and contrast considerations.
6. Exit ticket (5’) – Each student writes one CSS rule for a font property and briefly explains its purpose.

Recap the key font properties and why they matter for readability and accessibility. Collect the exit tickets to gauge understanding, and assign homework: create a personal webpage that uses at least three different font families and demonstrates proper size, colour, and alignment choices.