HTML CSS

Advanced

40 mins

Teacher/Student led

245 points

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

CSS Text

This step-by-step lesson will guide you through the process of styling text on a webpage using CSS. You'll learn how to set text and background colours, align text, add decorations and transformations, adjust text spacing, and apply a text shadow. Each step includes practical examples and encourages you to modify the code to see the effects of different CSS properties.

Learning Goals Learning Outcomes Teacher Notes

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.

done | 10 points

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.

done | 30 points

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)

done | 30 points

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.

done | 30 points

5 - Text Decoration

We use the text-decoration CSS property to add (or remove) decorations to text. We can give it the following values:

none
underline
overline
line-through

Take a look at the following HTML code (scroll to the right) and the CSS code to see how the different text decorations are used.

<h2>Volcanology of Italy</h2>
<p>The country is situated at the meeting point of the <span class="mytext-under">Eurasian Plate</span> and the <span class="mytext-under">African Plate</span>, leading to considerable seismic and volcanic activity. There are 14 volcanoes in Italy, four of which are active: <span class="mytext-over">Etna, Stromboli, Vulcano and Vesuvius</span>. The last is the only active volcano in mainland Europe and is most famous for the destruction of Pompeii and Herculanum in the eruption in <span class="mytext-through">80 AD</span> 79 AD. Several islands and hills have been created by volcanic activity, and there is still a large active caldera, the Campi Flegrei north-west of Naples. </p>

.mytext-under{
    text-decoration: underline;
}

.mytext-over {
    text-decoration: overline;
    background-color: yellow;
}

.mytext-through {
    text-decoration: line-through;
}

done | 30 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.

CSS Text

Live Class Feed

1 - Introduction

2 - Text Color

3 - Background Color

4 - Text Alignment

5 - Text Decoration

Unlock the Full Learning Experience

Learning Points