Hero background

Styling with Impact

Technology • Year 10 • 60 • 10 students • Created with AI following Aligned with New Zealand Curriculum

Create Your Own Plan
Technology
0Year 10
60
10 students
13 May 2025

Teaching Instructions

This is lesson 7 of 30 in the unit "Web Design Fundamentals". Lesson Title: Styling Text with CSS Lesson Description: Learn how to style text using CSS properties such as font-family, font-size, and color. Create a styled text layout for a webpage.

Styling with Impact

Overview

Year Level: Year 10
Subject: Technology – Digital Technologies
Unit Title: Web Design Fundamentals (Lesson 7 of 30)
Lesson Title: Styling Text with CSS
Curriculum Learning Area: Technology
Curriculum Level: Level 5 – Digital Technologies Curriculum (Designing and Developing Digital Outcomes)
Time: 60 minutes
Class Size: 10 students

Context:
This lesson introduces Year 10 students to styling textual content on webpages using CSS. It focuses on developing understanding of how design can influence readability, user experience, and aesthetic perceptions of digital outcomes, aligning with the Designing and Developing Digital Outcomes strand.

Learning Outcome

By the end of this session, students will be able to:

  • Apply font-family, font-size, and colour properties using embedded or internal CSS.
  • Experiment with text styles to enhance usability and communication in a webpage.
  • Reflect critically on the impact of typography choices in digital design.

Key Competencies Embedded

  • Thinking: Critically analysing the effectiveness of font choices.
  • Managing self: Independently applying CSS styles.
  • Using language, symbols, and texts: Interpreting code and styling syntax.
  • Relating to others: Providing constructive peer feedback in design critique.
  • Participating and contributing: Engaging with collaborative styling challenges.

Resources Needed

  • Student Devices (desktops/laptops with text editor or access to online code playgrounds such as JSFiddle, CodePen – offline versions available)
  • Pre-provided HTML skeleton file titled lesson7_text_styles.html
  • CSS Style Cards (physical or digital examples with visual demonstrations of font-family, font-size, and colour)
  • Projector or Digital Board
  • Whiteboard & markers

Teacher Preparation

  • Print/style cards with a variety of text design elements (some readable, some clashing) for discussion.
  • Prepare simple HTML template file that includes unstyled headings, paragraph tags, and a quote.
  • Identify a few design examples from local NZ websites or student projects to reference visually (screenshots).

Lesson Sequence

⏰ 0–10 min — Ignition: The Power of Typeface

Activity: “Eyes on Design” Quickfire

  • Show 3 different text examples projected on-screen:
    • 1 aesthetically pleasing (e.g., clean Google font with spacing)
    • 1 cluttered/confusing (e.g., comic sans + neon green on black)
    • 1 neutral/basic

Pose a question:

“Which design would make you want to read more? Why?”

Take short responses from 3–4 students. Invite discussion about first impressions, readability, and purpose.

Key Teaching Point:
Typography communicates mood. It affects not only readability, but how we feel and perceive content.

⏰ 10–25 min — Explicit Teaching & Modelling

Walkthrough: Styling Text with CSS

Using the projector and starter file lesson7_text_styles.html, demonstrate:

  1. How to add an internal <style> tag in the <head> section.
  2. Syntax for: 
    body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333333;
}

h1 {
  font-size: 36px;
  font-family: 'Georgia', serif;
  color: darkblue;
}

.quote {
  font-style: italic;
  color: #555;
}
  3. Explain inheritance (e.g., font-size cascades from parent to child if not overwritten).
  4. Show misuse: Assigning neon yellow on white background – poor contrast.

Pro Tip (Mini Think Break):
Ask:

"Why might using a script or cursive font not be ideal for long paragraphs?"

Students turn to their neighbour and share.

⏰ 25–40 min — Paired Task: My Text, My Style

Task: Customising Web Text

Students work in pairs to style the given blank HTML structure. Their job is to:

  • Choose appropriate font families for headings, body, and quotes.
  • Experiment with sizes and colours that align with content mood.
  • Write a short rationale (2–3 bullet points) about their design choices.

Encourage them to look up Google Fonts samples for inspiration (offline printouts if necessary).

Students should keep styles minimal (3–5 rules) to reinforce the idea of design intention without overwhelming detail.

⏰ 40–50 min — Gallery Walk & Feedback

Students rotate around devices, viewing one another’s designs with the prompt:

“What style decision stands out and why?”

Using sticky notes or digital comments, they leave positive or constructive feedback for at least one other group.

Teacher circulates, listening for vocabulary use: font-family, readability, hierarchy, contrast.

⏰ 50–58 min — Quick Reflection & Reinforcement

Whole Class Discussion:

Pose 3 reflection prompts:

  1. “What CSS property did you enjoy using most and why?”
  2. “What challenges did you face when choosing colour or font?”
  3. “How can styling impact someone's willingness to keep reading?”

Record responses visibly on board.

⏰ 58–60 min — Preview & Wrap

Briefly introduce next lesson:

"Next time, we’ll explore how to create consistent spacing and margins in web layout — the invisible design magic!”

Assessment (Formative)

  • Observation during paired task (engagement, application of CSS syntax)
  • Peer feedback notes
  • Student self-reflection in discussion
  • Rationale (2–3 points) saved in HTML comments within the file

Extensions for Early Finishers

  • Add more styles: letter-spacing, text-transform, or line-height
  • Create a small “brand identity” text set (heading, tagline, and blurb)
  • Experiment with combining a serif and sans-serif font pair thoughtfully

Cross-curricular Connections

  • Visual Arts: Understanding layout, balance, and composition
  • English: Considering tone and audience when designing for readability
  • Technology (Design and Visual Communication): Typography as visual language

Culturally Responsive Practice

  • Encourage students to use type to express identity (Māori whakataukī styled with appropriate fonts/symbols)
  • Include fonts that support macrons (ā, ē, ī, ō, ū)
  • Connect colour usage to cultural meaning (e.g., the use of red in Māori design to represent mana)

Final Thoughts

This lesson makes digital literacy an expressive art — helping students not just code, but craft. Styling with CSS becomes more than commands; it becomes storytelling. Through intentional teaching, student ideation, and reflection, we equip ākonga with both the technical skills and aesthetic sensitivity to design with purpose.

Create Your Own AI Lesson Plan

Join thousands of teachers using Kuraplan AI to create personalized lesson plans that align with Aligned with New Zealand Curriculum in minutes, not hours.

AI-powered lesson creation
Curriculum-aligned content
Ready in minutes
Start Creating FreeBrowse More Plans

Created with Kuraplan AI

🌟 Trusted by 1000+ Schools

Join educators across New Zealand