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

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 journey and assign it to your class.

🖨 Print Worksheet and Answer key of HTML vs CSS: structure vs style (PDF)

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

↓

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.

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.

Teach this with your class →

Quick Questions

1. Which language controls the colour and font of text on a webpage?

A. CSS ✓

B. HTML

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. style.css ✓

B. index.html

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.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?