HTML CSS

Advanced

40 mins

Teacher/Student led

Learning Goals

Learning Outcomes

+245 XP

What you need:
Chromebook/Laptop/PC or iPad/Tablet

CSS Text

In this lesson we learn about how to use CSS to style text in web pages.

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction
2 Text Color
3 Background Color
4 Text Alignment
5 Text Decoration
6 Text Transformation
7 Text Spacing
8 Text Shadow
Quiz

1 - Introduction

Using CSS we can style text on a web page in a number of different ways.

We can:

set the text colour and the background colour.
set the alignment (left, center, right etc.)
decorate the text (underline, overline, line through).
transform the text (uppercase, lowercase, capitalise).
set the text spacing (indent, letter spacing, word spacing, line height).
add a text shadow to the text.

👇 Mark your steps as done as you complete them.

+10 XP

2 - Text Color

The CSS color property is used to set the colour of text. We can give the color property one of the following values:

a colour name - for example "blue"
a HEX value - for example "#0066ff"
a RGB value - for example "rgb(0, 102, 255)"

Take a look at the CCS code in this example and to see how we use the color property and the different values we can use.

<h2>Italy</h2>
<h3>Capitol</h3>
<p>Rome</p>
<h3>Population</h3>
<p>59 million</p>

h2 {
    color: blue;
}

h3{
    color: #009900;
}

p{
    color: rgb(255, 0, 0);
}

Try editing the values in the CSS code and see what effects it has when you run the code. Click the "see the colours" button to see a list of colours you can use.

see the colours

Color name	Hex	(R,G,B)
Black	#000000	(0,0,0)
White	#FFFFFF	(255,255,255)
Red	#FF0000	(255,0,0)
Lime	#00FF00	(0,255,0)
Blue	#0000FF	(0,0,255)
Yellow	#FFFF00	(255,255,0)
Cyan	#00FFFF	(0,255,255)
Magenta	#FF00FF	(255,0,255)
Silver	#C0C0C0	(192,192,192)
Gray	#808080	(128,128,128)
Maroon	#800000	(128,0,0)
Olive	#808000	(128,128,0)
Green	#008000	(0,128,0)
Purple	#800080	(128,0,128)
Teal	#008080	(0,128,128)
Navy	#000080	(0,0,128)

👇 Mark your steps as done as you complete them.

+30 XP

3 - Background Color

We can also set the background colour of text by using the background-color CSS property. Again this takes either a colour name, a HEX value or a RGB value.

<h2>Italy</h2>
<h3>Capitol</h3>
<p>Rome</p>
<h3>Population</h3>
<p>59 million</p>

h2 {
    color: blue;
    background-color: gray;
}

h3{
    color: #009900;
    background-color: #cccccc;
}

p{
    color: rgb(255, 0, 0);
    background-color: rgb(192, 192, 192);
}

Try editing the values in the CSS code and see what effects it has when you run the code. Click the "see the colours" button to see a list of colours you can use.

see the colours

Color name	Hex	(R,G,B)
Black	#000000	(0,0,0)
White	#FFFFFF	(255,255,255)
Red	#FF0000	(255,0,0)
Lime	#00FF00	(0,255,0)
Blue	#0000FF	(0,0,255)
Yellow	#FFFF00	(255,255,0)
Cyan	#00FFFF	(0,255,255)
Magenta	#FF00FF	(255,0,255)
Silver	#C0C0C0	(192,192,192)
Gray	#808080	(128,128,128)
Maroon	#800000	(128,0,0)
Olive	#808000	(128,128,0)
Green	#008000	(0,128,0)
Purple	#800080	(128,0,128)
Teal	#008080	(0,128,128)
Navy	#000080	(0,0,128)

+30 XP

4 - Text Alignment

We use the text-align CSS property to set how the text should align. We can give it the following values:

left
right
center
justify (each line is stretched so that every line has equal width)

<h2>Italy</h2>
<h3>Capitol</h3>
<p>Rome</p>
<h3>Population</h3>
<p>59 million</p>
<h3>About Italy</h3>
<p>Italy, officially the Italian Republic is a country consisting of a peninsula delimited by the Alps and several islands surrounding it. Italy is located in south-central Europe, and is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city, the country covers a total area of 301,340 km2 (116,350 sq mi) and shares land borders with France, Switzerland, Austria, Slovenia, and the enclaved microstates of Vatican City and San Marino. Italy has a territorial enclave in Switzerland (Campione) and a maritime exclave in Tunisian waters (Lampedusa). With around 60 million inhabitants, Italy is the third-most populous member state of the European Union. </p>

h2 {
    color: blue;
    background-color: gray;
    text-align: center;
}

h3{
    color: #009900;
    background-color: #cccccc;
    text-align: right;
}

p{
    color: rgb(255, 0, 0);
    background-color: rgb(192, 192, 192);
    text-align: justify;
}

Try editing the values in the CSS code and see what effects it has when you run the code. Change the values of the text-align properties to left, right, center and justify.

+30 XP

123learn · Online learning platform

Unlock the full learning experience

You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

Hundreds of curriculum-aligned lessons

Interactive activities in every lesson

Printable resources & progress tracking

Get started

Copyright Notice
This lesson is copyright of Coding Ireland 2017 - 2026. Unauthorised use, copying or distribution is not allowed.

CSS Text

Teacher Class Feed

1 - Introduction

2 - Text Color

3 - Background Color

4 - Text Alignment

Unlock the full learning experience

XP