Lesson Plan

Resources → Subject Notes → Information Communication Technology ICT → Notes
Lesson Plan
Grade: Date: 01/12/2025
Subject: Information Communication Technology ICT
Lesson Topic: Be able to attach comments to an external stylesheet
Learning Objective/s:
  • Describe the purpose and benefits of using comments in CSS.
  • Write correct CSS comment syntax for single‑line and multi‑line comments.
  • Insert and manage comments within an external stylesheet.
  • Link an external stylesheet to an HTML document and optionally comment out the link for testing.
  • Apply best‑practice guidelines for maintaining clear and useful CSS comments.
Materials Needed:
  • Computer with internet access
  • Code editor or IDE (e.g., Visual Studio Code)
  • Projector or interactive whiteboard
  • Sample HTML file and external CSS file
  • Handout summarising CSS comment syntax
  • Printed diagram of the comment workflow (optional)
 Introduction:
Begin with a quick demo of a styled webpage that looks broken, asking students what might be causing the issue. Recall that comments are used in code to explain and temporarily disable sections. Explain that today they will learn how to add meaningful comments to an external CSS file and how to control stylesheet linking. Success will be measured by their ability to annotate a stylesheet and correctly link or comment out the link tag.
Lesson Structure:
  1. Do‑Now (5') – Students view a page with missing styles and note observations.
  2. Mini‑lecture (10') – Explain why comments are important and demonstrate CSS comment syntax.
  3. Guided practice (15') – Students open a sample styles.css and insert single‑line and multi‑line comments as instructed.
  4. Demonstration (5') – Teacher shows how to link the stylesheet in HTML and how to comment out the <link> tag.
  5. Independent activity (15') – Learners create a small webpage, add an external stylesheet, annotate sections with comments, and test by commenting out the link.
  6. Check for understanding (5') – Quick exit‑ticket quiz: write the CSS comment delimiters and state one best‑practice tip.
Conclusion:
Summarise that comments improve readability, maintenance, and allow safe testing by disabling code. Invite a few students to share a comment they added and its purpose. Collect exit tickets where they write the CSS comment delimiters and one best‑practice tip. For homework, students will comment their own project stylesheet following the guidelines.