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>

xxxxxxxxxx
 
<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);
}

xxxxxxxxxx
 
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>

xxxxxxxxxx
 
<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);
}

xxxxxxxxxx
 
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>

xxxxxxxxxx
 
<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;
}

xxxxxxxxxx
 
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

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>

xxxxxxxxxx
 
<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;
}

xxxxxxxxxx
 
.mytext-under{
    text-decoration: underline;
}
​
.mytext-over {
    text-decoration: overline;
    background-color: yellow;
}
​
.mytext-through {
    text-decoration: line-through;
}

+30 XP

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

CSS Text

Teacher Class Feed

1 - Introduction

Send your work to your teacher

2 - Text Color

Send your work to your teacher

3 - Background Color

Send your work to your teacher

4 - Text Alignment

Send your work to your teacher

5 - Text Decoration

Send your work to your teacher

Unlock the Full Learning Experience