← ACARA Digital Technologies Years 9–10

The text-align property

A CSS property that sets how lines of text line up inside an element: left, center or right. Example: text-align: center; centres a heading's text. It styles the text, not the box.

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

Understanding The text-align property in ACARA Digital Technologies Years 9–10

What it does: The value left is the way to set text to start at the left edge, which is the default for English text. The rule selects the h2 element and the property changes how the text inside it lines up, not where the element itself sits. CSS uses the US spelling center. The word centre is not a valid value, so the browser ignores it. CSS uses a colon between the property and its value, not an equals sign. The property is text-align. There is no font-align property in CSS. Each line of text in the paragraph is centred inside the paragraph's box.

Common mistakes: CSS only accepts the American spelling 'center' as a text-align value. 'centre' is ignored, so the heading stays left-aligned. It should be text-align: center;. A CSS declaration needs a colon between the property and its value. It should be text-align: right;.

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 The text-align property 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 CSS rule centres the text inside an h1 heading?

h1 { text-align: center; }h1 { text-align: centre; }

Matches

h1 { text-align: centre; }

↓

CSS uses the American spelling center. The value centre is not valid, so the heading stays aligned left.

Applying

Meanings

Term

text-align

Meaning

A CSS property that sets how lines of text line up inside an element: left, center or right. Example: text-align: center; centres a heading's text. It styles the text, not the box.

Practice

<style>

Testing

Gaps

h1 { : center; }

Check Answer

Spots

3 font-size: 32px;

4 text-align: centre;

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 CSS rule centres the text inside an h1 heading?

A. h1 { text-align: centre; }

B. h1 { text-align: center; } ✓

CSS uses the US spelling center. The word centre is not a valid value, so the browser ignores it.

2. What does text-align style?

A. The lines of text inside the element ✓

B. The position of the element's box on the page

text-align lines up the text inside the element. It does not move the box itself.

3. Which value pushes the text to the right-hand edge of its element?

A. text-align: right; ✓

B. text-align: end-of-line;

The common values are left, center and right. end-of-line is not a valid value.

4. Which line is written with correct CSS syntax?

A. p { text-align = left; }

B. p { text-align: left; } ✓

CSS uses a colon between the property and its value, not an equals sign.

5. Which property would you use to centre the words of a heading?

A. text-align ✓

B. font-align

The property is text-align. There is no font-align property in CSS.

Match the Pairs

h1 { text-align: center; } → Centres the text of every h1 heading in the middle of its line

p { text-align: right; } → Lines up the text of every paragraph against the right edge

Left alignment lines the text up against the left edge of its element → text-align: left;

text-align styles the text inside an element, so it is written in the rule for that element → h2 { text-align: center; }

h1 { text-align: centre; } → CSS uses the American spelling center. The value centre is not valid, so the heading stays aligned left.

h1 { text-align = center; } → A colon is needed between the property and its value, not an equals sign.

Key Term

text-align

A CSS property that sets how lines of text line up inside an element: left, center or right. Example: text-align: center; centres a heading's text. It styles the text, not the box.

Fill in the Blanks

1. h1 { text-align: center; }

Hint: Type the CSS property that sets how lines of text line up inside an element.

2. h1 { text-align: center; }

Hint: Type the value that puts the heading's text in the middle of its box.

3. p { text-align: left; }

Hint: Type the value that lines the paragraph's text up along its starting edge.

4. h2 { text-align: right; }

Hint: Type the element selector for the second-level heading whose text is being aligned.

5. .date { text-align: right; }

Hint: Type the value that pushes the text in this class to the far edge of its element.

Spot the Error

Question 1

A h1 {

B color: navy;

C font-size: 32px;

D text-align: centre;

E }

Line D — CSS only accepts the American spelling 'center' as a text-align value. 'centre' is ignored, so the heading stays left-aligned. It should be text-align: center;

Question 2

A p {

B color: black;

C font-size: 16px;

D text-align right;

E }

Line D — A CSS declaration needs a colon between the property and its value. It should be text-align: right;

Question 3

A h2 {

B color: teal;

C text-align: middle;

D }

Line C — 'middle' is not a valid text-align value. The valid values are left, right, center and justify. For the middle of the line use text-align: center;

Question 4

A h1 (

B text-align: center;

C color: purple;

D }

Line A — A CSS rule's declarations go inside curly braces { }, not round brackets. The first line should be h1 {

Question 5

A p.note {

B text_align: right;

C color: gray;

D }

Line B — The CSS property name uses a hyphen, not an underscore. It should be text-align: right;

Student with a class code? Join your class →