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.

• Year 8
• Computing
• 4 activities
• 20 min–45 min

Learning Objectives

1. Compare the structural role of HTML elements with the styling role of CSS properties.
2. Design a CSS rule to modify the font family and color of a specific HTML element.
3. Analyze the benefits of using external stylesheets for managing website design consistency.
4. Create a simple webpage that utilizes external CSS to style multiple HTML elements.
5. Explain how CSS selectors target specific HTML elements for styling.

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.

Prepare & details

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.

Setup: Tables/desks arranged in 4-6 distinct stations around room

Materials: Station instruction cards, Different materials per station, Rotation timer

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

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.

Prepare & details

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.

Setup: Tables/desks arranged in 4-6 distinct stations around room

Materials: Station instruction cards, Different materials per station, Rotation timer

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

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.

Prepare & details

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.

Setup: Tables/desks arranged in 4-6 distinct stations around room

Materials: Station instruction cards, Different materials per station, Rotation timer

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

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.

Prepare & details

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

Setup: Tables/desks arranged in 4-6 distinct stations around room

Materials: Station instruction cards, Different materials per station, Rotation timer

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

Teaching This Topic

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.

What to Expect

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

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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

Assessment Ideas

Quick Check

After Pair Programming: Basic Styling Duel, present students with a provided HTML snippet and a CSS rule. Ask them to write the exact two changes the rule will make to the rendered page and explain which HTML element will be affected.

Exit Ticket

After Personal Webpage Makeover, ask students to submit their CSS file with two required rules: one changing all paragraph text to green and one making all h1 headings bold. Require a one-sentence explanation of why separating CSS improves site maintenance.

Discussion Prompt

During Stylesheet Relay, pause after the first round and ask students to discuss how they would style all club headings identically using CSS. After discussion, have one group demonstrate their solution and explain the advantage of using a separate stylesheet over inline styles.

Extensions & Scaffolding

• Challenge early finishers to add a hover effect to their webpage elements using the :hover pseudo-class.
• Scaffolding for struggling students: Provide a scaffolded CSS template with commented placeholders for each selector and property they need to complete.
• Deeper exploration: Ask students to research and apply at least two different ways to center a div on the page, then compare the methods in a short reflection.

Key Vocabulary

selector	A pattern used to select the HTML element(s) you want to style. Examples include element types (like 'p' for paragraph) or class names.
property	A characteristic of an HTML element that you want to change, such as 'color', 'font-size', or 'background-color'.
value	The setting you assign to a CSS property. For example, 'blue' is a value for the 'color' property, or '16px' is a value for 'font-size'.
declaration block	The part of a CSS rule that contains one or more declarations (property-value pairs), enclosed in curly braces {}.
external stylesheet	A separate .css file that contains all your CSS rules, linked to your HTML document using the <link> tag.