One stylesheet, three pages: separating content, structure and presentation

The idea

A web page holds its text as content, marks its structure with HTML elements and sets its look in a separate CSS stylesheet, so one stylesheet change restyles every page and the structure still serves screen readers when styles are off.

What you need

• Computer with a text editor and two browsers
• A screen reader (NVDA on Windows or VoiceOver on macOS)
• Access to the W3C Markup Validation Service

How to do it

1. Write three short HTML pages about one topic using h1, h2, p, ul and nav elements, with no styling in the HTML.
2. Link all three pages to one file, style.css.
3. In style.css set the body font-family, the h2 size and the nav background; view all three pages.
4. Change one rule in style.css and reload all three pages.
5. Turn styles off in the browser (for example View, Page Style, No Style in Firefox) and read each page.
6. Use the screen reader's heading list on one page, then check each page in the W3C validator and fix any errors.

What you should see

One change in style.css restyles all three pages without any edit to the HTML. With styles off, each page still reads in a sensible order with visible headings, because the structure lives in the HTML. The screen reader lists the h1 and h2 headings in order, letting a listener jump between sections. The validator reports no errors once every element is closed and nested correctly. The learner knows it worked when all three checks (restyle, styles off, heading list) pass on every page.

What changes

This activity lists no variables to change, measure and keep the same.

Common misconceptions

Each of these ideas is wrong, and the activity is a chance to test it.

• HTML headings are just big bold text (they mark structure that assistive technology relies on).
• Each page needs its own styles (one shared stylesheet keeps a site consistent).
• If it looks right it is right (the validator and a screen reader find problems the eye misses).

Safety card

Curriculum references

The NSW syllabus outcomes and Australian Curriculum v9 codes this activity supports. They are references, not a verified or complete curriculum alignment.

• Computing Technology 7–10 Syllabus (2022), NESA. Current elective syllabus. Code read from the outcomes page on 2026-09-22.CT5-DES-01CT5-COM-01
• Australian Curriculum v9AC9TDI10K02AC9TDI10P07

Sources

The pages the author read to write this activity.

1. curriculum.nsw.edu.au/learning-areas/tas/computing-technology-7-10-2022/outcomes
2. developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
3. developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content
4. developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML
5. validator.w3.org