Lesson Plan

• Describe how to define CSS classes for background colours and images.
• Explain how to apply font colour, size, weight, style and family using CSS classes.
• Demonstrate how to style tables, rows and cells with size, alignment, spacing, padding and border properties, including collapsed borders.

• Projector and screen
• Computers with internet access
• Code editor (e.g., VS Code)
• Sample HTML file and CSS stylesheet
• Printed handout of CSS property reference
• Sample images for background testing
• Access to the W3C validator

Begin with a quick poll: “What makes a website look visually appealing?” Connect responses to the role of CSS classes. Review previously learned selectors and the importance of reusable styles. State that by the end of the lesson students will create and apply classes that control backgrounds, fonts, and table layouts.

1. Do‑now (5') – short quiz on common CSS property names.
2. Mini‑lecture (10') – background‑color, background‑image, repeat, position, size.
3. Guided practice (10') – students write two background classes in the editor.
4. Demo (10') – font properties (color, family, size, weight, style, text‑align, line‑height).
5. Student activity (10') – create a font class and apply it to a paragraph.
6. Table‑styling tutorial (15') – size, spacing, padding, alignment, borders, border‑collapse.
7. Pair work (15') – build a 3‑column, 2‑row table and style it with .header‑row and .data‑cell classes.
8. Check for understanding (10') – validate HTML, peer review of CSS, quick exit ticket.

Recap the three groups of CSS classes created today and highlight how they improve consistency and efficiency. Ask students to write one exit‑ticket sentence summarising the most useful property they learned. For homework, students will design a simple web page that uses at least three of the classes covered (background, font, and table) and submit it for validation.