← Years 9–10 Data & Information

Restyling one document with a different stylesheet

Change which stylesheet this tag points to and the same HTML looks totally different, because presentation lives in the CSS file, not in the content.

Part of: 9-10 Digital Technologies: Representing online documents — Module 17, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 41

Understanding Restyling one document with a different stylesheet in Years 9–10 Data & Information

What it does: Every page linked to this stylesheet shows its h1 headings in crimson after this one rule changes, so the presentation is controlled in one place. The link tag points the HTML at a CSS file. Changing the href to another file swaps the whole look of the page. HTML holds content and structure. CSS holds presentation, so a new look usually only needs a new or edited stylesheet.

Common mistakes: A link tag uses href, not src, to point to the stylesheet file. Without href the browser cannot load dark.css, so the presentation will not change. It should be href="dark.css">. CSS rules use curly braces { }, not round brackets. Without them the rule is ignored and the heading will not be restyled. It should be h1 { color: navy; }.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Restyling one document with a different stylesheet to a class →

This module's key terms are also in a printable crossword (Modules 17–51) and word search (Modules 6–132).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

You swap light.css for dark.css in the link tag and leave the HTML content alone. What changes?

How the page looks (colours, fonts) changes, but the content stays the sameThe words and headings on the page change to new content

Matches

<h1 style="color: red;">Our School Trip</h1>

↓

Putting the style inside the HTML mixes presentation into the content, so swapping the stylesheet will not change this heading.

Applying

Meanings

Term

Meaning

Change which stylesheet this tag points to and the same HTML looks totally different, because presentation lives in the CSS file, not in the content.

Practice

<head>

Testing

Gaps

< rel="stylesheet" href="dark.css">

Check Answer

Spots

2<link rel="stylesheet"

3 src="dark.css">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. You swap light.css for dark.css in the link tag and leave the HTML content alone. What changes?

A. How the page looks (colours, fonts) changes, but the content stays the same ✓

B. The words and headings on the page change to new content

The stylesheet controls presentation only. The text, headings and structure in the HTML stay exactly the same.

2. Which line restyles the page with a different stylesheet without touching the content?

A. <link rel="stylesheet" href="dark.css"> ✓

B. <p style="dark.css">

The link tag points the HTML at a CSS file. Changing the href to another file swaps the whole look of the page.

3. You edit one rule in styles.css: h1 { color: green; }. Your site has 10 pages that all link to styles.css. What happens?

A. Every h1 on all 10 pages turns green ✓

B. Only the h1 on the page you were looking at turns green

All 10 pages share one stylesheet, so editing one rule restyles every page at once. That is a big benefit of separating presentation from content.

4. After swapping the stylesheet, how can you check that the HTML did not change?

A. You must rewrite every heading and paragraph so they match the new style

B. The only edit was the href in the link tag, so the HTML elements and text are identical ✓

If only the CSS file (or the link's href) changed, the content and structure are the same. Only the presentation is different.

5. A student says: "To make my page look different, I have to rewrite my HTML." Is this true or false?

A. True: the HTML decides every colour and font, so it must be rewritten

B. False: you can change the CSS file and leave the HTML untouched ✓

HTML holds content and structure. CSS holds presentation, so a new look usually only needs a new or edited stylesheet.

Match the Pairs

Edit one rule in a shared stylesheet and every page that uses it is restyled, with no HTML edits. → h1 { color: crimson; }

To check the content and structure did not change, the HTML file stays exactly the same while only the CSS file is swapped. → <h1>Our School Trip</h1>

<h1 style="color: red;">Our School Trip</h1> → Putting the style inside the HTML mixes presentation into the content, so swapping the stylesheet will not change this heading.

Key Term

<link rel="stylesheet" href="dark.css">

Change which stylesheet this tag points to and the same HTML looks totally different, because presentation lives in the CSS file, not in the content.

Fill in the Blanks

1. <link rel="stylesheet" href="dark.css">

Hint: Type the tag name that connects an HTML page to a CSS file.

2. <link rel="stylesheet" href="light.css">

Hint: Type the attribute that holds the file name of the stylesheet. Changing its value swaps the look of the page.

3. <link rel="stylesheet" href="dark.css">

Hint: Type the keyword that tells the browser what kind of file is being linked.

4. h1 { color: navy; font-size: 32px; }

Hint: Type the element selector for the main heading. Editing this one rule restyles every page that uses the stylesheet.

5. body { background: black; }

Hint: Type the CSS property that sets the colour behind the page content. Only the CSS changes, not the HTML.

Spot the Error

Question 1

A <head>

B <link rel="stylesheet"

C src="dark.css">

D </head>

Line C — A link tag uses href, not src, to point to the stylesheet file. Without href the browser cannot load dark.css, so the presentation will not change. It should be href="dark.css">.

Question 2

A body {

B background: #fff;

C }

D h1 ( color: navy; )

Line D — CSS rules use curly braces { }, not round brackets. Without them the rule is ignored and the heading will not be restyled. It should be h1 { color: navy; }.

Question 3

A <head>

B <title>Menu</title>

C <link rel="stylesheet"

D href="dark.css>

Line D — The href value is missing its closing quote. The browser may misread the tag and fail to load the stylesheet. It should be href="dark.css">.

Question 4

A /* shared by every page */

B p {

C font-family; Arial;

D }

Line C — A CSS declaration needs a colon between the property and its value, not a semicolon. Written correctly, one edit here restyles every page that uses this file. It should be font-family: Arial;.

Question 5

A <body>

B <h1>Our Team</h1>

C <p class="intro">Welcome!<p>

D </body>

Line C — The paragraph is closed with <p>, which opens a new paragraph. A closing tag needs a slash. The HTML structure should stay the same when you swap stylesheets, so it should end with </p>.

Student with a class code? Join your class →