Computing · Year 8

Active learning ideas

Introduction to CSS: Styling

Active learning works for this topic because students need hands-on practice to see how CSS rules change visual presentation without altering content. Immediate feedback from pair reviews and group challenges helps students grasp the separation of concerns between HTML and CSS concretely.

• National Curriculum Attainment Targets
• KS3: Computing - Web Technologies
• KS3: Computing - CSS

• 20–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Stations Rotation
• 30 min · Pairs

Pair Programming: Basic Styling Duel

Pairs share one computer with a starter HTML page. One partner writes CSS for colors and fonts on headings, the other adds background and borders to body. Switch roles after 10 minutes, then combine and test in browser for a cohesive page.

Differentiate between the roles of HTML and CSS in web development.

Facilitation Tip

During Pair Programming: Basic Styling Duel, circulate to ask each pair to explain their CSS choices aloud before testing changes.

What to look for

Present students with a simple HTML snippet and a CSS rule. Ask: 'Which HTML element will this CSS rule affect, and what two changes will it make to that element?'

• Remember
• Understand
• Apply
• Analyze
• Self-Management
• Relationship Skills

Activity 02

• Stations Rotation
• 45 min · Small Groups

Small Groups: CSS Property Stations

Set up stations for font, color, margin, and padding properties. Groups of four rotate every 7 minutes, applying one property to a shared HTML template and noting effects in a class log. Discuss efficiencies at the end.

Design a CSS rule to change the color and font of text on a web page.

Facilitation Tip

For CSS Property Stations, assign each station a distinct property (e.g., color, font-family) so groups rotate with a focused goal.

What to look for

Provide students with a basic HTML page and a blank CSS file. Ask them to write one CSS rule to change the color of all paragraph text to green and another rule to make all h1 headings bold. They should also write one sentence explaining why using a separate CSS file is beneficial.

• Remember
• Understand
• Apply
• Analyze
• Self-Management
• Relationship Skills

Activity 03

• Stations Rotation
• 35 min · Individual

Individual: Personal Webpage Makeover

Provide each student a plain HTML bio page. They create an external CSS file to style it with custom colors, fonts, and spacing. Preview in browser, then share one 'wow' effect with the class.

Analyze how external stylesheets improve the efficiency of web design.

Facilitation Tip

In Personal Webpage Makeover, require students to document their design decisions in comments within their CSS file to reinforce reflection.

What to look for

Ask students: 'Imagine you are building a website for a school club. How would you use CSS to make all the headings look the same, and what is the advantage of doing this in a separate stylesheet rather than directly in the HTML?'

• Remember
• Understand
• Apply
• Analyze
• Self-Management
• Relationship Skills

Activity 04

• Stations Rotation
• 20 min · Whole Class

Whole Class: Stylesheet Relay

Project a blank HTML page. Students suggest CSS rules one by one, teacher adds them live. Class votes on improvements, revealing cascade order through real-time changes.

Differentiate between the roles of HTML and CSS in web development.

What to look for

Present students with a simple HTML snippet and a CSS rule. Ask: 'Which HTML element will this CSS rule affect, and what two changes will it make to that element?'

• Remember
• Understand
• Apply
• Analyze
• Self-Management
• Relationship Skills

A few notes on teaching this unit

Teach CSS as a visual language first, using side-by-side comparisons of HTML and CSS files to make the separation clear. Avoid overwhelming students with advanced selectors early; prioritize mastery of element selectors, classes, and basic properties. Research shows that students grasp cascading and specificity best through iterative testing and debugging, not lectures.

Successful learning looks like students confidently writing CSS selectors to target elements, applying properties like color and font-size, and explaining why external stylesheets improve code maintainability. They should also debug misapplied styles and collaborate to solve styling problems.

---

Watch Out for These Misconceptions

• During Pair Programming: Basic Styling Duel, watch for students who edit the HTML file to change colors or fonts, believing CSS alters content.

  Ask each pair to stop after their first change and identify which file they edited. Then, have them swap the CSS rule to a different element to see the effect without touching the HTML.

• During CSS Property Stations, listen for groups arguing that inline styles are easier because they see immediate changes.

  Challenge each group to edit one inline style at a time across three identical paragraphs, then compare the effort to changing one rule in an external stylesheet.

• During Stylesheet Relay, watch for students writing unique CSS rules for every paragraph, assuming elements must be styled individually.

  After the relay, display the final stylesheet and ask students to count how many times the same class or element selector was reused.

---

Methods used in this brief

• Stations Rotation