Lesson Plan

• Describe the purpose and syntax of the class attribute in HTML.
• Apply one or multiple classes to HTML elements and correctly link an external CSS stylesheet.
• Demonstrate how class selectors style elements and explain the role of specificity.
• Evaluate class‑naming conventions and avoid common mistakes.
• Create a simple navigation bar using multiple classes and test the combined styling.

• Computer with internet access for each student
• Projector or interactive whiteboard
• Text editor/IDE (e.g., VS Code)
• Sample HTML and CSS files (digital or printed)
• Worksheet with class‑naming and syntax practice
• Web browser for live preview

Begin with a quick demo of how a single class can change the look of many elements, sparking interest in efficient styling. Review the previous lesson on IDs and ask students to recall the key difference between IDs and classes. Explain that by the end of today’s session they will be able to add, combine, and style classes confidently.

1. Do‑now (5'): Quick quiz on ID vs. class differences; discuss answers.
2. Mini‑lecture (10'): Introduce class attribute syntax, multiple classes, and CSS class selectors with live code examples.
3. Guided coding (15'): Teacher creates example.html and styles.css, adds classes, links stylesheet, and shows the rendered result.
4. Pair activity (15'): Students build a navigation bar with three links, assign .nav-link to each, add an .active class to the current page, and write corresponding CSS.
5. Check for understanding (5'): Exit ticket – write the correct class attribute for an element that needs two classes.
6. Review & feedback (5'): Highlight common mistakes, best‑practice naming, and answer lingering questions.

Summarise how classes enable flexible, reusable styling and reinforce the naming conventions discussed. Collect the exit tickets to gauge understanding, and assign a homework task: create a personal webpage that uses at least three different elements each with multiple classes, documenting the CSS rules used.