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

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.

    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.

    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