| Lesson Plan |
| Grade: 10 |
Date: 01/12/2025 |
| Subject: Information Communication Technology ICT |
| Lesson Topic: Be able to save styles in cascading stylesheet format |
Learning Objective/s:
- Describe the purpose and basic syntax of CSS.
- Explain how external stylesheets are linked to HTML documents.
- Apply correct file naming, encoding, and folder structure for CSS files.
- Create and save a simple CSS file and verify its effect on a web page.
- Evaluate a checklist to ensure styles are saved and linked properly.
|
Materials Needed:
- Computer with internet access
- Text editor or IDE (e.g., VS Code, Notepad++)
- Projector or interactive whiteboard
- Sample HTML file and folder structure
- Printed checklist for saving CSS files
- Worksheet with CSS rule practice
|
Introduction:
Begin with the question, “How can we change a webpage’s appearance without editing the HTML?” Review that CSS controls presentation and recall previous work on inline styles. State that today students will learn to create, save, and link external CSS files, with success measured by a correctly styled page.
|
Lesson Structure:
- Do‑now (5'): Students list ways to style a webpage (inline, internal, external) and share answers.
- Mini‑lecture (10'): Explain CSS basics, the cascade, and file requirements; demo creating a .css file and linking it.
- Guided practice (15'): Students create a folder, index.html, styles.css, write basic rules, and link the stylesheet while the teacher circulates.
- Checklist verification (5'): Use the provided checklist to confirm correct file extension, encoding, path, and syntax.
- Independent practice (15'): Complete the practice exercise – style a heading, paragraph, and navigation list.
- Peer review (5'): Pairs test each other's pages in a browser and give feedback.
- Quick recap quiz (5'): Exit ticket – write the HTML line needed to link a stylesheet named “style.css”.
|
Conclusion:
Recap the importance of correct file naming, proper linking, and the cascade rules. Collect the exit tickets and remind students to create a second HTML page that uses the same stylesheet and adds one new CSS rule for homework.
|