HTML CSS
Hard
30 mins
245 points
What you need:
  • Computer/laptop

CSS Text

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

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.

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.

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

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.

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

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)
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.

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.

Join our club 😃

To view the remaining 3 steps and access hundreds of other coding projects please login or create an account.

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more