CSS: Colors, Fonts, and Layout

Active learning works for CSS styles because students need immediate visual feedback to connect abstract code with real outcomes. When students see color shifts or layout changes in real time, they grasp the impact of units and positioning faster than through abstract explanations.

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

Learning Objectives

1. Compare the visual impact of different CSS color values (hex, RGB, named colors) on a web page.
2. Analyze the effect of various font-family and font-size units (px, em, %) on text readability and layout.
3. Design a CSS stylesheet to apply a consistent visual theme, including color and typography, across multiple HTML pages.
4. Critique the use of color and typography on a given website, identifying strengths and areas for improvement.
5. Demonstrate the application of basic CSS positioning (relative, absolute) to arrange page elements.

Gallery Walk

⏱ 35 min·Pairs

Pairs Challenge: Color Harmony Hunt

Pairs select a website theme, like 'ocean' or 'forest', and code CSS rules for complementary colors using hsl() and rgb(). They apply to sample HTML, swap screens to critique, and refine based on feedback. End with a class gallery vote.

Prepare & details

Compare different CSS units for sizing elements and text.

Facilitation Tip: During the Color Harmony Hunt, have students screenshot their color pairings and write a one-sentence rationale for each choice to reinforce intentional design decisions.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Gallery Walk

⏱ 45 min·Small Groups

Small Groups: Font Factory Workshop

Groups receive mismatched HTML text blocks and create font-family stacks with fallback options, varying sizes in px, em, and rem. Test readability on different 'devices' by resizing browser windows. Compile into a shared stylesheet demo.

Prepare & details

Construct a CSS stylesheet to create a consistent visual theme for a multi-page website.

Facilitation Tip: In the Font Factory Workshop, require groups to present their font stack decisions and explain how readability and visual hierarchy guided their selections.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Gallery Walk

⏱ 40 min·Whole Class

Whole Class: Layout Relay Race

Divide class into teams. Each member adds one layout property (margin, padding, position) to a shared HTML file projected live. Teams race to achieve a balanced page design, discussing choices as a group before final tweaks.

Prepare & details

Critique a web page's design for its effective use of color and typography.

Facilitation Tip: For the Layout Relay Race, display each team’s progress on a shared screen so students can see how positioning affects the document flow in real time.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Gallery Walk

⏱ 30 min·Individual

Individual: Redesign Critique Lab

Students analyse a poorly laid-out webpage screenshot, identify issues, then code CSS fixes focusing on box model and positioning. Upload before-and-after versions to a class padlet for peer comments.

Prepare & details

Compare different CSS units for sizing elements and text.

Facilitation Tip: In the Redesign Critique Lab, provide a rubric that explicitly asks students to evaluate consistency, contrast, and alignment in their redesigns.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Teaching This Topic

Teach CSS by prioritizing experimentation over memorization. Guide students to notice patterns through side-by-side comparisons of px versus em or rgb versus hex. Avoid lectures longer than 10 minutes; instead, model debugging live as students work. Research shows that active construction of stylesheets builds deeper understanding than passive observation.

What to Expect

Successful learning looks like students confidently selecting units for sizing based on context, applying color and font choices that align with design principles, and debugging layout issues through trial and iteration. They should articulate why they chose specific values and units.

Watch Out for These Misconceptions

Common Misconception

During the Color Harmony Hunt, watch for students who assume all color units are interchangeable.

What to Teach Instead

Have pairs test their color values by swapping px with em for font sizes in their snippets, then observe how each unit affects the layout. Ask them to document when fixed units work better and when relative units preserve design integrity.

Common Misconception

During the Layout Relay Race, watch for students who think absolute positioning always removes elements from the page flow.

What to Teach Instead

Challenge teams to place an absolutely positioned element inside a relatively positioned container, then observe how the container’s space remains affected. Ask them to sketch the flow before and after rendering to clarify the difference.

Common Misconception

During the Color Harmony Hunt, watch for students who rely solely on named colors.

What to Teach Instead

Provide hex and rgb swatches alongside named colors, then ask pairs to replicate a provided color palette using custom values. Use the browser’s eyedropper tool to verify accuracy, reinforcing precision and flexibility.

Assessment Ideas

Quick Check

After the Color Harmony Hunt, present students with a snippet of HTML paired with three different CSS color rules. Ask them to predict the rendered output and justify their answers in writing, focusing on how units influence color application.

Peer Assessment

After the Font Factory Workshop, have students swap completed font stacks with a partner. Each student reviews their partner’s CSS for readability and visual hierarchy, then provides one specific suggestion for improvement based on typographic principles.

Exit Ticket

After the Layout Relay Race, ask students to write down one example each of relative and fixed units they used in their layouts. For each, they should explain why the unit was appropriate for the situation.

Extensions & Scaffolding

• Challenge: Ask students to add a media query that changes the layout on mobile devices, testing their responsive design skills.
• Scaffolding: Provide pre-selected font families and color palettes for students who struggle with harmonization.
• Deeper exploration: Introduce CSS variables for theming, then have students refactor their stylesheets to use consistent variables across pages.

Key Vocabulary

CSS Selector	A pattern used to select the HTML element(s) you want to style. Examples include element names, classes, and IDs.
Hexadecimal Color	A six-digit code representing a color using a combination of numbers (0-9) and letters (A-F), preceded by a '#'. For example, '#FF0000' is red.
Font-size Units	Different ways to specify the size of text, such as pixels (px) for fixed size, ems (em) for relative size based on parent element, and percentages (%) for relative size based on parent element.
Padding	The space between the content of an element and its border. It increases the internal spacing within an element.
Margin	The space outside an element's border, separating it from other elements. It controls the external spacing around an element.
Absolute Positioning	An element is positioned relative to its nearest positioned ancestor, or the initial containing block if none exists. It is taken out of the normal document flow.