The text-align property

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which CSS rule centres the text inside an h1 heading?

A h1 { text-align: centre; }

B h1 { text-align: center; }

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

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

A text-align: right;

B text-align: end-of-line;

4. Which line is written with correct CSS syntax?

A p { text-align = left; }

B p { text-align: left; }

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

A text-align

B font-align

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1h1 { text-align: center; }		Atext-align: left;
2p { text-align: right; }		BLines up the text of every paragraph against the right edge
3Left alignment lines the text up against the left edge of its element		CA colon is needed between the property and its value, not an equals sign.
4text-align styles the text inside an element, so it is written in the rule for that element		Dh2 { text-align: center; }
5h1 { text-align: centre; }		ECSS uses the American spelling center. The value centre is not valid, so the heading stays aligned left.
6h1 { text-align = center; }		FCentres the text of every h1 heading in the middle of its line

Definitions

text-align

Fill in the Blanks

Complete each line of code by filling in the missing parts.

h1 { __________: center; }

h1 { text-align: ______; }

p { text-align: ____; }

__ { text-align: right; }

.date { text-align: _____; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A h1 {

B color: navy;

C font-size: 32px;

D text-align: centre;

E }

Question 2

A p {

B color: black;

C font-size: 16px;

D text-align right;

E }

Question 3

A h2 {

B color: teal;

C text-align: middle;

D }

Question 4

A h1 (

B text-align: center;

C color: purple;

D }

Question 5

A p.note {

B text_align: right;

C color: gray;

D }

Answer Key

The text-align property

Section A: Quick Questions

B — h1 { text-align: center; }

A — The lines of text inside the element

A — text-align: right;

B — p { text-align: left; }

A — text-align

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

h1 { text-align: center; }

p {
  text-align: left;
}

h2 { text-align: right; }

.date {
  text-align: right;
}

Section E: Spot the Error

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;

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

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;

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

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