← ACARA Digital Technologies Years 9–10

Building a simple page with HTML and CSS together

Placed in the head of the HTML file, it connects the page to style.css, so the CSS rules in that second file style the content and structure written in the HTML file.

Part of: ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 42

Understanding Building a simple page with HTML and CSS together in ACARA Digital Technologies Years 9–10

What it does: This code is content and structure only, with no styling. It is the first step before the CSS file is added. The link tag goes in the head of the HTML file. It tells the browser which CSS file to load. A link element uses the href attribute to point to the file. The src attribute is for things like images. A CSS rule has a selector and a property with a value. The h1 tag with its text is HTML content. Add one rule at a time, save, then refresh. That way you can see what each rule changes.

Common mistakes: A link tag finds the CSS file with the href attribute, not src. Line 3 should be href="style.css">. Without href the browser never loads the stylesheet. A dot at the start means a class selector, so this rule would only match class="img". To style every <img> element the selector must be plain img, with no dot.

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 Building a simple page with HTML and CSS together to a class →

This module's key terms are also in a printable crossword (Modules 155–225) and word search (Modules 116–225).

Take this worksheet further — free with Cloodit

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

Learning
Duo
A bird-watch page is built in two files. Which file holds the headings, list, image and link?
The HTML file (index.html)The CSS file (style.css)
Matches
<body><link rel="stylesheet" href="style.css"></body>
↓
The link element is placed in the body. It belongs in the head so the stylesheet loads for the page.
Applying
Meanings
Term
<link rel="stylesheet" href="style.css">
Meaning
Placed in the head of the HTML file, it connects the page to style.css, so the CSS rules in that second file style the content and structure written in the HTML file.
Practice
<!DOCTYPE html>
Testing
Gaps
< rel="stylesheet" href="style.css">
Check Answer
Spots
2 <link rel="stylesheet"
3 src="style.css">

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

The 'Abyssal Dragon' badge — Deep Sea Legend, one of Cloodit's 106 collectible badges
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. A bird-watch page is built in two files. Which file holds the headings, list, image and link?
A. The CSS file (style.css)
B. The HTML file (index.html) ✓
The HTML file holds the content and structure. The CSS file only holds style rules.
2. Where should the link to the stylesheet go?
A. Inside the head: <link rel="stylesheet" href="style.css"> ✓
B. At the bottom of style.css
The link tag goes in the head of the HTML file. It tells the browser which CSS file to load.
3. Which line correctly connects the bird-watch page to its CSS file?
A. <link rel="stylesheet" href="style.css"> ✓
B. <link rel="stylesheet" src="style.css">
A link element uses the href attribute to point to the file. The src attribute is for things like images.
4. Which rule belongs in style.css?
A. <h1>Bird Watch</h1>
B. h1 { color: darkgreen; } ✓
A CSS rule has a selector and a property with a value. The h1 tag with its text is HTML content.
5. You add a new rule to style.css, but the page still looks the same. What should you do first?
A. Save the CSS file and refresh the browser ✓
B. Delete the HTML file and start again
Add one rule at a time, save, then refresh. That way you can see what each rule changes.

Match the Pairs

<link rel="stylesheet" href="style.css"> → Connects the HTML file to the CSS file style.css so its rules style the page
h1 { color: darkgreen; } → A CSS rule in style.css that makes every main heading on the bird-watch page dark green
Write the HTML structure first: a heading, a list of birds and a link, all inside the body → <body><h1>Bird Watch</h1><ul><li>Magpie</li></ul><a href="https://birdlife.org.au">BirdLife</a></body>
Add one CSS rule at a time to style.css, then refresh the browser to see the change → img { width: 300px; }
<body><link rel="stylesheet" href="style.css"></body> → The link element is placed in the body. It belongs in the head so the stylesheet loads for the page.
<head><link rel="stylesheet" href="styles.css"></head> → The href says styles.css but the file is named style.css, so the browser cannot find it and the page stays unstyled.

Key Term

<link rel="stylesheet" href="style.css">
Placed in the head of the HTML file, it connects the page to style.css, so the CSS rules in that second file style the content and structure written in the HTML file.

Fill in the Blanks

1. <link rel="stylesheet" href="style.css">
Hint: Type the tag name that connects the HTML file to a CSS file.
2. <link rel="stylesheet" href="style.css">
Hint: Type the attribute that holds the location of the CSS file.
3. <head> <link rel="stylesheet" href="style.css"> </head>
Hint: Type the name of the section that holds the stylesheet link, to close it.
4. img { width: 300px; }
Hint: Type the element selector that styles every image on the bird-watch page.
5. <li class="rare">Gouldian Finch</li> .rare { color: crimson; }
Hint: Type the class name that matches the selector in the CSS rule below.

Spot the Error

Question 1
A <head>
B <link rel="stylesheet"
C src="style.css">
D </head>
Line C — A link tag finds the CSS file with the href attribute, not src. Line 3 should be href="style.css">. Without href the browser never loads the stylesheet.
Question 2
A h1 {
B color: darkgreen;
C }
D .img {
E width: 200px;
F }
Line D — A dot at the start means a class selector, so this rule would only match class="img". To style every <img> element the selector must be plain img, with no dot.
Question 3
A <body>
B <h1>Backyard Bird Watch</h2>
C <p>Birds I spotted today:</p>
Line B — The closing tag must match the opening tag. This heading opens with <h1> so it must close with </h1>, not </h2>.
Question 4
A <header>
B <title>Bird Watch</title>
C <link rel="stylesheet"
D href="style.css">
E </head>
Line A — The stylesheet link and the title go inside <head>, which matches the </head> closing tag. <header> is a different element for the visible top of the page. Line 1 should be <head>.
Question 5
A ul {
B list-style: square;
C color: #2e6b3a;
D margin-left: 20px,
E }
Line D — Each CSS declaration ends with a semicolon, not a comma. Line 4 should be margin-left: 20px; so the browser reads it correctly.

Student with a class code? Join your class →