Lesson Plan

• Describe the purpose and advantages of using an external stylesheet.
• Apply CSS selectors to style h1, h2, h3, p and li elements.
• Link an external stylesheet to an HTML document correctly using the <link> element.
• Modify CSS properties and predict the visual effect in a web browser.

• Computers with internet access
• Projector and screen
• Text editor/IDE (e.g., VS Code, Notepad++)
• Printed handout of sample index.html and styles.css
• Whiteboard and markers

Start with a quick poll: “Where have you seen the same design on different web pages?” Connect this to the idea of reusable styles. Review that students already know how to add inline and internal CSS. Explain that today they will learn the most efficient way – external stylesheets – and will be able to demonstrate it by the end of the lesson.

1. Do‑now (5'): Quick quiz on CSS terminology and where styles can be placed.
2. Mini‑lecture (10'): Explain external stylesheets, benefits, and the <link> tag syntax.
3. Demonstration (10'): Show sample styles.css and live preview of styled h1‑h3, p, li elements.
4. Guided practice (15'): Students create a “website” folder, add index.html and styles.css, link the stylesheet, and copy the provided CSS rules.
5. Exploration (10'): Students change a CSS property (e.g., colour or font‑size) and refresh the browser to see the effect.
6. Check for understanding (5'): Exit ticket – write the exact HTML line needed to link styles.css and name one CSS rule they modified.

Recap that external stylesheets keep design consistent and simplify site maintenance. Collect the exit tickets and highlight a few successful modifications. For homework, students will design a simple personal webpage using an external stylesheet to style headings, paragraphs, and a list.