Lesson Plan

• Describe the key characteristics of inline styles and CSS classes.
• Compare reusability, specificity and maintenance implications of styles versus classes.
• Apply an inline style to a single element and create a reusable class in a stylesheet.
• Choose the appropriate method (style or class) for given design scenarios.

• Computer with internet access
• Projector or interactive whiteboard
• Code editor (e.g., VS Code)
• Sample HTML file
• Pre‑written CSS stylesheet
• Worksheet with practice scenarios
• Checklist handout for style vs class decisions

Start with a quick poll: who has ever used the style attribute to change text colour? Review that HTML can hold presentation but best practice separates content from style. Explain that today’s success criteria are to explain the differences between styles and classes and to implement both correctly.

1. Do‑Now (5') – Students add an inline style (colour + font‑weight) to a provided paragraph.
2. Mini‑lecture (10') – Explain inline, internal, and external styles; show the characteristics table.
3. Guided practice (12') – Demonstrate creating a .highlight class in a <style> block and applying it to multiple elements.
4. Pair activity (15') – Worksheet with scenarios; students decide and code either an inline style or a class.
5. Whole‑class review (8') – Groups share decisions; teacher clarifies specificity and maintenance.
6. Exit quiz (5') – One‑sentence ticket: “When would you choose a class over an inline style?”

Recap that inline styles are for one‑off tweaks while classes provide reusable, maintainable styling. Collect the exit tickets to confirm understanding of the key selection factor. For homework, students create a small webpage that uses at least three different classes and one inline style.