← ACARA Digital Technologies Years 9–10

Fixing common HTML and CSS mistakes

Finding and fixing small slips in code, such as a missing closing tag, quote, semicolon or brace, or a class name that does not match. Check your code against the rules to spot each one.

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

Understanding Fixing common HTML and CSS mistakes in ACARA Digital Technologies Years 9–10

What it does: The semicolon after the value and the closing brace are the small details that stop the rule breaking the styles that follow. Both use the name note, so the style applies. A spelling difference such as notes would mean the rule never matches. Most elements need a closing tag. Without </p>, the browser has to guess where the paragraph ends, which can break the layout below it. Class names must match exactly between HTML and CSS. mnu and menu are different names, so the rule never finds the element. The href must match the real file name and path. styles.css is not the same file as style.css, so the browser cannot load the stylesheet.

Common mistakes: The href has the wrong file path. The stylesheet is called style.css, so the browser cannot find style.cs and no styles load. Check the Network or Sources tab in Inspect for a failed file. It should be href="style.css". The margin declaration is missing its semicolon. Without it the browser joins it to the padding line and may ignore both. It should be margin: 8px;.

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 Fixing common HTML and CSS mistakes 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 student writes <p>Welcome to my page. and never closes the paragraph. What is the fault?
Wrong class name: it needs a class attributeUnclosed tag: it needs </p> at the end
Matches
<img src="cat.jpg alt="A cat">
↓
The closing quote after cat.jpg is missing, so the attribute value runs on and the tag is read wrongly. Add the quote after cat.jpg.
Applying
Meanings
Term
debugging
Meaning
Finding and fixing small slips in code, such as a missing closing tag, quote, semicolon or brace, or a class name that does not match. Check your code against the rules to spot each one.
Practice
<style>
Testing
Gaps
<p>Welcome to my page</>
Check Answer
Spots
1<link rel="stylesheet" href="style.cs">
2<h1>My Page</h1>

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

The 'Reef Shark' badge — Reef Ruler, 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 student writes <p>Welcome to my page. and never closes the paragraph. What is the fault?
A. Unclosed tag: it needs </p> at the end ✓
B. Wrong class name: it needs a class attribute
Most elements need a closing tag. Without </p>, the browser has to guess where the paragraph ends, which can break the layout below it.
2. Which CSS rule is written correctly?
A. p { color: blue; } ✓
B. p { color: blue
Every CSS rule needs a closing brace }. A missing brace can make the browser ignore this rule and the ones after it.
3. The CSS says .menu { color: red; } but the HTML has <nav class="mnu">. Why does the style not apply?
A. The class name is misspelt, so it does not match .menu ✓
B. The nav element cannot have a class attribute
Class names must match exactly between HTML and CSS. mnu and menu are different names, so the rule never finds the element.
4. Which line has a missing semicolon problem?
A. h1 { color: red; font-size: 2em; }
B. h1 { color: red font-size: 2em; } ✓
Each declaration ends with a semicolon. Without one after red, the browser reads 'red font-size: 2em' as one broken value.
5. Your CSS file is called style.css in the same folder as your page, but the page does not look styled. Which link tag is likely the fault?
A. <link rel="stylesheet" href="style.css">
B. <link rel="stylesheet" href="styles.css"> ✓
The href must match the real file name and path. styles.css is not the same file as style.css, so the browser cannot load the stylesheet.

Match the Pairs

<p>Welcome to my page → The paragraph has no closing tag, so the browser may treat the following content as part of the paragraph
<link rel="stylesheet" href="styles/main.css"> → Loads a stylesheet from a file path, which must match the real folder and file name or no styling is applied
A CSS declaration must end with a semicolon and the rule must be closed with a brace → p { color: blue; }
The class name in the HTML must match the class selector in the CSS exactly, including spelling → <p class="note"> with .note { color: red; }
<img src="cat.jpg alt="A cat"> → The closing quote after cat.jpg is missing, so the attribute value runs on and the tag is read wrongly. Add the quote after cat.jpg.
h1 { color: green; background-color: yellow; → The closing brace is missing, so the rule is never closed and later rules may fail. Add } at the end.

Key Term

debugging
Finding and fixing small slips in code, such as a missing closing tag, quote, semicolon or brace, or a class name that does not match. Check your code against the rules to spot each one.

Fill in the Blanks

1. <p>Welcome to my page</p>
Hint: Type the tag name that closes this opening tag.
2. <p class="note">Check this</p> .note { color: red; }
Hint: Type the class name so the selector matches the HTML class.
3. h1 { color: navy; font-size: 32px; }
Hint: Type the property that sets text size. The semicolon before it ends the previous declaration.
4. p { color: green; }
Hint: Type the property that sets the text colour. The semicolon and closing brace are already in place.
5. <link rel="stylesheet" href="style.css">
Hint: Type the attribute that holds the path to the stylesheet file.

Spot the Error

Question 1
A <link rel="stylesheet" href="style.cs">
B <h1>My Page</h1>
C <p>Welcome!</p>
Line A — The href has the wrong file path. The stylesheet is called style.css, so the browser cannot find style.cs and no styles load. Check the Network or Sources tab in Inspect for a failed file. It should be href="style.css".
Question 2
A p {
B color: green;
C margin: 8px
D padding: 4px;
E }
Line C — The margin declaration is missing its semicolon. Without it the browser joins it to the padding line and may ignore both. It should be margin: 8px;
Question 3
A <ul>
B <li>Apples</li>
C <li>Pears</li>
D <li>Plums
E </ul>
Line D — The last list item is missing its closing tag. Every <li> needs a matching </li>. It should be <li>Plums</li>.
Question 4
A <div class="box">One</div>
B <div class="box">Two</div>
C <div class="bax">Three</div>
D <style>.box { color: red; }</style>
Line C — The class name is misspelt. The CSS rule targets .box, so class="bax" does not match and this div is not styled. It should be class="box".
Question 5
A h1 {
B color: red;
C }
D p { color: gray;
E h2 { color: blue; }
Line D — The closing brace is missing, so the rule is never closed and the next rule can break too. It should be p { color: gray; }

Student with a class code? Join your class →