← ACARA Digital Technologies Years 9–10

Inline, internal and external CSS

Adds an external CSS file. Inline uses style=, internal uses <style>, but only this external link lets many pages share one stylesheet and fully separates presentation from structure.

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

Understanding Inline, internal and external CSS in ACARA Digital Technologies Years 9–10

What it does: A style element in the head holds CSS rules for that one page. It is internal CSS because the rules are inside the HTML file. The style attribute puts the styling inside the h1 tag. The look and the structure end up in the same place, so changing the look means editing every tag. Inline styles mix how something looks into the structure of the page. This makes changes slow because you must edit each tag.

Common mistakes: A link element finds the external CSS file with the href attribute, not src. It should be href="style.css">. An internal stylesheet must be closed with a closing tag. Line 4 should be </style>, not a second opening <style>.

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 Inline, internal and external CSS 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

Which code is an inline style?

Matches

<p style>color: red;</p>

↓

The CSS is written as the paragraph text instead of inside the style attribute value. It should be <p style="color: red;">.

Applying

Meanings

Term

Meaning

Adds an external CSS file. Inline uses style=, internal uses <style>, but only this external link lets many pages share one stylesheet and fully separates presentation from structure.

Practice

<!DOCTYPE html>

Testing

Gaps

<p ="color: red;">Hello</p>

Check Answer

Spots

3 <link rel="stylesheet"

4 src="style.css">

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.

Add to class →

Quick Questions

1. Which code is an inline style?

A. <p style="color: red;">Hi</p> ✓

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

Inline CSS uses the style attribute on a single tag. The link element points to an external file instead.

2. Where does an internal style element normally go?

A. Inside each <p> tag

B. Inside the <head> of the page ✓

An internal <style> element sits in the <head> and styles that one page. Putting CSS inside each tag is inline styling.

3. Which way of adding CSS lets many pages share one set of styles?

A. An inline style attribute

B. An external .css file ✓

Many pages can link to the same style.css file, so one change updates them all. Inline styles only affect the one element they are written on.

4. Which method fully separates presentation from structure?

A. External stylesheet ✓

B. Inline style

With an external file, the HTML holds only the structure and the CSS file holds all the presentation. Inline styles mix the two together.

5. Which tag links an external stylesheet?

A. <link rel="stylesheet" href="style.css"> ✓

B. <style src="style.css"></style>

A <link> element in the head, with rel="stylesheet" and an href, loads the CSS file. The <style> element holds CSS code and has no src.

Match the Pairs

<p style="color: red;">Hi</p> → Inline CSS: the style attribute applies a style to this one element only

Internal CSS puts the rules in a style element inside the head of one page → <style> p { color: blue; } </style>

Inline CSS mixes presentation into the structure because the styling sits inside the tag → <h1 style="font-size: 40px;">Menu</h1>

<p style>color: red;</p> → The CSS is written as the paragraph text instead of inside the style attribute value. It should be <p style="color: red;">.

<body> <style>p { color: red; }</style> </body> → The style element sits in the body, not the head. Internal CSS belongs inside head. Also, this CSS is not in an external file, so it cannot be shared by other pages.

Key Term

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

Adds an external CSS file. Inline uses style=, internal uses <style>, but only this external link lets many pages share one stylesheet and fully separates presentation from structure.

Fill in the Blanks

1. <p style="color: red;">Hello</p>

Hint: Type the attribute name that adds inline CSS to a single tag.

2. <head> <style>p { color: blue; }</style> </head>

Hint: Type the element that holds an internal style element.

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

Hint: Type the rel value that tells the browser this file is CSS.

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

Hint: Type the attribute that gives the path to the external CSS file.

5. <head> <link rel="stylesheet" href="style.css"> </head>

Hint: Type the element name that connects an external stylesheet to the page.

Spot the Error

Question 1

A <head>

B <title>Home</title>

C <link rel="stylesheet"

D src="style.css">

E </head>

Line D — A link element finds the external CSS file with the href attribute, not src. It should be href="style.css">.

Question 2

A <head>

B <style>

C p { color: red; }

D <style>

E </head>

Line D — An internal stylesheet must be closed with a closing tag. Line 4 should be </style>, not a second opening <style>.

Question 3

A <body>

B <p style="color= red;">Hi</p>

C <p>Bye</p>

D </body>

Line B — Inline CSS inside a style attribute uses property: value, with a colon. It should be style="color: red;".

Question 4

A /* style.css */

B p {

C color = blue;

D }

Line C — A CSS declaration in an external file is written property: value;. The equals sign should be a colon: color: blue;.

Question 5

A <styles>

B h1 { color: blue; }

C p { color: green; }

D </style>

Line A — An internal stylesheet goes in a <style> element. The tag name is style, not styles, so it should be <style>.

Student with a class code? Join your class →