← HTML & CSS

HTML vs CSS: structure vs style

The language that defines the structure and content of a webpage using tags and elements, not appearance.

Part of: HTML and CSS Journey — Module 2, 9-10 Digital Technologies: Representing online documents — Module 2, IGCSE Computer Science 0478 — 5.1 The Internet and the World Wide Web — Module 18, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 7

Understanding HTML vs CSS: structure vs style in HTML & CSS

What it does: The <p> tag is a pure HTML content element - it places a paragraph on the page without any styling information. Setting font-size is a CSS concern - it changes how content looks, which is exactly what CSS is for. HTML uses angle-bracket tags to mark up content. CSS uses selectors and property-value pairs instead. Font size is a CSS property. It belongs in a .css file, not in the HTML file. They are separate languages. HTML structures content; CSS styles it. They work together but are distinct. The <link> tag in <head> with rel='stylesheet' loads an external CSS file. <style> is for writing CSS directly inside HTML.

Common mistakes: The <style> tag belongs inside <head>, not wrapping page content. Visible content should be inside <body>, not <style>. HTML elements cannot appear inside a CSS file. The <h1> tag belongs in an HTML file, not mixed into CSS rules.

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 HTML vs CSS: structure vs style to a class →

This module's key terms are also in a printable crossword (Modules 1–12) and word search (Modules 1–23).

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which language controls the colour and font of text on a webpage?
CSSHTML
Matches
<p color="red">Text</p>
↓
color is a CSS property, not an HTML attribute - use CSS to style colour
Applying
Meanings
Term
HTML
Meaning
The language that defines the structure and content of a webpage using tags and elements, not appearance.
Practice
<!DOCTYPE html>
Testing
Gaps
<>My Heading</h1>
Check Answer
Spots
2<html>
3<style>

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

The 'Starfish' badge — Five-Point Star, 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. Which language controls the colour and font of text on a webpage?
A. HTML
B. CSS ✓
CSS handles all visual styling - colours, fonts, spacing. HTML defines the content and structure.
2. Which language uses tags like <h1>, <p>, and <div>?
A. HTML ✓
B. CSS
HTML uses angle-bracket tags to mark up content. CSS uses selectors and property-value pairs instead.
3. Which file would you use to change a heading's font size?
A. index.html
B. style.css ✓
Font size is a CSS property. It belongs in a .css file, not in the HTML file.
4. True or false: HTML and CSS are the same language.
A. False ✓
B. True
They are separate languages. HTML structures content; CSS styles it. They work together but are distinct.
5. Which tag connects an HTML file to an external CSS stylesheet?
A. <link> ✓
B. <style>
The <link> tag in <head> with rel='stylesheet' loads an external CSS file. <style> is for writing CSS directly inside HTML.

Match the Pairs

<h1>Hello</h1> → HTML structure - defines a top-level heading as page content
h1 { color: blue; } → CSS style rule - sets the text colour of all h1 elements
HTML defines what content is on the page, not how it looks → <p>This is a paragraph.</p>
CSS controls visual appearance like colour, size, and layout → p { font-size: 18px; }
<p color="red">Text</p> → color is a CSS property, not an HTML attribute - use CSS to style colour
h1 { <p>Hello</p> } → HTML tags must never appear inside CSS rule blocks - only property-value pairs belong there

Key Term

HTML
The language that defines the structure and content of a webpage using tags and elements, not appearance.

Fill in the Blanks

1. <h1>My Heading</h1>
Hint: Type the HTML opening tag name for a top-level heading
2. <p>Welcome</p>
Hint: Type the closing tag name that matches the opening paragraph tag
3. h1 { color: red; }
Hint: Type the HTML element selector that CSS is targeting
4. <link rel="stylesheet" href="style.css">
Hint: Type the filename of the CSS stylesheet being linked
5. <body> <h1>Title</h1> </body>
Hint: Type the HTML tag that wraps all visible page content

Spot the Error

Question 1
A <!DOCTYPE html>
B <html>
C <style>
D <h1>Hello</h1>
E </html>
Line C — The <style> tag belongs inside <head>, not wrapping page content. Visible content should be inside <body>, not <style>.
Question 2
A h1 {
B color: blue;
C }
D <h1>Hello</h1>
Line D — HTML elements cannot appear inside a CSS file. The <h1> tag belongs in an HTML file, not mixed into CSS rules.
Question 3
A <head>
B <link rel="stylesheet" href="style.css">
C </head>
D <body>
E <p>Hello</p>
F </body>
Line A — If <head> were missing or misspelled, the browser could not parse the document head correctly. The <link> to a stylesheet must sit inside a valid <head> element.
Question 4
A <body>
B <h1 color="red">Title</h1>
C <p>Some text</p>
D </body>
Line B — color is a CSS property, not an HTML attribute. To style colour, use CSS: h1 { color: red; } rather than putting it inside the HTML tag.
Question 5
A <!DOCTYPE html>
B <html>
C <head></head>
D <body>
E <div>Content</div>
F <html>
Line F — The closing tag must be </html> with a forward slash. Without the slash it is an opening tag, not a closing tag.

Student with a class code? Join your class →