Home Teach and assess Classroom resources Lesson ideas A matter of style
A matter of style Image

About this lesson

In this lesson sequence, students using the Zen Garden website reflect on criteria for effective design. They then explore the benefits of stylesheets in separating style and content and to learn to how use them.

Year band: 9-10

Curriculum Links Assessment

Learning sequence

Download Lesson

Learning hook

In the Garden of Zen

  1. The Zen Garden website has become famous as an example of the unlimited designs made possible using the same basic webpage and applying different CSS to the HTML page provided.

    Introduce students to the Zen Garden website, including the     Design List, an extensive collection of layouts all presenting identical data.

  2. Ask students to explore these and to select a favourite from the collection. Each student displays their favourite on their screen.

  3. Students place a piece of paper in front of their screen. Students walk around the classroom and vote for the top three by ticking on three around the room (first, second and third receive equal weight).

  4. Add up the ticks. Was there a clear winner? Lead discussion: what made some designs more popular? (For example, ease of access to menus, readability, situations or contexts where different designs would be more popular than others, etc.)

By the end of this sequence of learning, all learners will be able to define CSS and apply it. You could also focus on the skillset and mindsets that learners mind need to adopt and use during this project, this ties in with the Creative and Critical Thinking Capabilities.

Learning map and outcomes

The first websites used HTML tags to describe the style of text in a webpage. These needed to be inserted every time a change in style occurred. The ability to define styles and reuse them gave web site designers a very versatile tool. This approach use what are known as Cascading Style Sheets (CSS).

Learning input

  1. Introduces CSS as follows:
    In the early days of the Internet, webpage content was integrated with tags indicating presentation styles such as font, size, colour, background colour or pattern, images and so on.

  2. Show examples, such as: w3schools HTML Text Formatting
  3. Ask students why not separating form and function in webpages might create problems. Discuss the importance of the separation of form from function in websites. (For example, repeated styles must be redefined each time they are used within a page and also on multiple pages; changes in design are tedious as they are difficult to locate in source code and can be easily missed; data content must be completely redone for multiple devices such as mobile devices and laptops.)

  4. Discuss the .css files provided as links on each Zen Garden design page (designs are available from the Design List section of the site).

  5. Emphasise the unlimited possibilities when using CSS, as seen on the Zen Garden site.

  6. Ask students to find any website and to turn off the CSS styling using their browser menu.
    For example:
    • Firefox: View > Page Style > No Style
    • Chrome: First install the Web Developer plugin. Then CSS > Disable Styles > Disable All Styles
    • Safari: Develop (turn this on in Safari preferences, under Advanced) > Disable Styles

  7. Discuss the effects on user experience of the styling. Students observe and are encouraged to ask clarifying questions.

  8. Ask students to try to find a website that does not use styling with CSS. They will discover how hard this is! They then examine the source code to see the HTML style tags throughout the document.

Learning construction

The heart of learning construction for this lesson sequence is the excellent tutorials on CSS provided free at Code Academy. Students complete a CSS tutorial. Our recommendation is: codecademy CSS Tutorial. It is not necessary to sign in, although doing so allows students to save lesson results.

Learning demo

  1. Students are introduced to the Code Pen website.
  2. They examine the 'Pens' tab at the top navigation bar then select the 'Picked' tab and explore the featured CSS/Javascript coded effects.
  3. Following completion of the Code Academy CSS lessons:
    • Easier: Students create, or are issued with, a simple HTML page, unassociated with a CSS stylesheet and are asked to create their own design using CSS.
    • Harder: Given the Zen Garden HTML page (see Resources), students use CSS to create their own design. (Optionally, they may use the online Code Pen tool). Note that the basic HTML page provided is associated with an initial CSS stylesheet. Students may either modify this or start from scratch.
  4. Students demonstrate their results to the class.