← HTML & CSS

Adding CSS to HTML

A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.

Part of: HTML and CSS Journey — Module 33

What it does: Linking one external file from many pages means a single change updates every page at once. <link rel="stylesheet" href="file.css"> in the <head> loads an external CSS file. <css> is not a valid HTML element. <link> and <style> both belong in the <head>. Placing them in <body> is invalid and may cause rendering issues. Inline styles (style="...") override external and embedded styles because they have the highest specificity. rel="stylesheet" is required to tell the browser the linked file is a CSS stylesheet. Without it, the file is ignored. The style attribute accepts CSS property-value pairs directly on any element, such as <p style="color:red;">.

Common mistakes: HTML tag names must be lowercase. <Style> should be written as <style>. The href attribute value must be in double quotes: href="styles.css", not href=styles.css without quotes.

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 Adding CSS to HTML (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which element connects an external CSS file to an HTML page?

Matches

<Style> p { color: blue; } </Style>

↓

Tag names must be lowercase — <Style> and </Style> should be <style> and </style>

Applying

Meanings

Term

<link>

Meaning

A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.

Practice

<html>

Testing

Gaps

Check Answer

Spots

1<Style>

2 p { color: red; }

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 element connects an external CSS file to an HTML page?

A. <link> ✓

B. <css>

2. Where must <link> and <style> elements be placed?

A. Inside the <head> element ✓

B. Inside the <body> element

3. Which CSS method has the highest specificity?

A. Inline style attribute ✓

B. External stylesheet

Inline styles (style="...") override external and embedded styles because they have the highest specificity.

4. True or false: the rel attribute on <link> must be 'stylesheet' to load CSS.

A. True ✓

B. False

rel="stylesheet" is required to tell the browser the linked file is a CSS stylesheet. Without it, the file is ignored.

5. Which approach is best for styling multiple HTML pages consistently?

A. External stylesheet with <link> ✓

B. Inline style attribute on each element

An external CSS file linked from many pages means one change updates every page. Inline styles must be changed one element at a time.

Match the Pairs

<p style="color: red;">Hello</p> → Inline CSS — the style attribute applies CSS to this single element and has the highest specificity

External stylesheets are preferred — one CSS file can be shared across multiple HTML pages → <link rel="stylesheet" href="style.css">

<Style> p { color: blue; } </Style> → Tag names must be lowercase — <Style> and </Style> should be <style> and </style>

Key Term

<link>

A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.

Fill in the Blanks

1. <style> p { color: red; } </style>

Hint: Type the element name that embeds CSS directly inside the HTML document

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

Hint: Type the self-closing element name used to attach an external CSS file

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

Hint: Type the rel value that tells the browser this linked file is a CSS stylesheet

4. <link rel="stylesheet" href="style.css">

Hint: Type the attribute name on link that provides the path to the CSS file

5. <p style="color: blue;">Hello</p>

Hint: Type the attribute name used to apply CSS directly to a single element

Spot the Error

Question 1

A <Style>

B p { color: red; }

C </style>

Line A — HTML tag names must be lowercase. <Style> should be written as <style>.

Question 2

A <head>

B <link rel="stylesheet" href=styles.css>

C <title>My Page</title>

D </head>

Line B — The href attribute value must be in double quotes: href="styles.css", not href=styles.css without quotes.

Question 3

A <head>

B <title>Page</title>

C <link rel=stylesheet href="main.css">

D </head>

Line C — The rel attribute value must be in double quotes: rel="stylesheet", not rel=stylesheet without quotes.

Question 4

A <head>

B <title>Page</title>

C <style>

D </Style>

E </head>

Line D — HTML tag names must be lowercase. </Style> should be written as </style>.

Question 5

A <html>

B <head><title>Page</title></head>

C <body>

D <p style=color:red>Hello</p>

E </body>

F </html>

Line D — The inline style attribute value must be in double quotes: style="color:red;", not style=color:red without quotes.

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?