Lesson Topic: Be able to create generic external styles and inline style attributes including background properties (colour, images), font properties, table, table row, table header and table data properties (size, background colour, horizontal and vertical alignm
Learning Objective/s:
Create external CSS style sheets and correctly link them to HTML pages.
Apply inline style attributes to individual HTML elements.
Use background‑color, background‑image and related properties to style pages and elements.
Manipulate font properties such as family, size, weight, style and colour.
Style tables, rows, header and data cells with size, background colour, alignment, spacing, padding and borders.
Materials Needed:
Computer with internet access
Projector or interactive whiteboard
Text editor/IDE (e.g., VS Code)
Sample HTML files and a style.css template
Image files for background examples
Printed worksheet with CSS property‑matching activity
Introduction:
Begin with a quick demo of a plain HTML page that looks bland, then ask students how they could make it more attractive. Recall that the previous lesson covered basic HTML structure and the role of the element. Today they will learn to write external style rules and inline styles, and will know how to check their work against the success criteria of correctly styled backgrounds, fonts and tables.
Lesson Structure:
Do‑now (5') – short quiz on CSS selectors and property syntax.
Mini‑lecture (15') – explain external style sheets, linking with , and basic rule syntax; show a live example.
Guided practice (20') – students create a style.css to set body background colour and font‑family, then link it to a sample page.
Inline styling & table demo (15') – teacher models inline styles on a paragraph and a table, highlighting background, font and border properties.
Independent activity (20') – learners style a provided HTML page using both external and inline CSS, including a formatted table; teacher circulates for checks.
Exit ticket (5') – each student writes one CSS rule they found most useful and one remaining question.
Conclusion:
Summarise how external style sheets provide reusable styling while inline attributes handle one‑off tweaks. Invite a few pupils to share the rule they added to their table and explain why it works. Collect the exit tickets and assign homework to redesign a personal web page using at least three new CSS properties.