Learn how to write HTML - lesson 3

Adding some colour to your words...
To format text (and a lot of other things, but we'll just work with text for now) you use the 'style' attribute. this is applied to a container surrounding the text, such as a <p> tag, <span> tag or the <div> tag.

A quick aside...
- the <div> and <p> containers are 'block level' elements, meaning that by default, they span the width of the page, creating a line break.
- the <span> container is an 'inline' element, meaning it does not span the width of the page, by default taking up as much space as the content it encloses.

For ease of use, as we are formatting letters within the same line we will use the <span> tag for this. <span>. Just this tag alone will do nothing, we need to add a value to it. Let's make your text red. As you have found previously, you start the area concerned with a tag. What you need to do is BEFORE the sentence you typed in, and AFTER the <body> tag, because this is all part of the body...type in <span style = "color:#FF0000;">. Now save your notepad and refresh your html page. You should now have red text!!!

As you've used an opening tag <span>, you need to finish it. So, after the end of your sentence type in </span>. To give an example of how this works, try putting the </span> in the middle of your sentence instead of the end. Save and refresh your page, and you will be able to see why it's important that you close the tags where you're supposed to. It's not hard to do, but you need to know that it's important.

To see what your notepad is supposed to be looking like, click here.


Have a little play. Change the colour from red to green, or yellow, or blue. Refresh your page each time to see the results. Pretty easy, isn't it?


Using more colours...
You've learnt how to make red text, as well as green, yellow etc...but what if you don't want one of those basic colours? What if you want your text to be this shade of green or this shade of red?
This is where a colour chart comes into play, which lists all of the colours you can use. Click here for the colour chart. All you do to use any of the colours on the colour chart is put the colour # in instead of the colour name. For example, you would type in "<span style = "color:##FF99CC">" to get this colour.


Get creative with your colour!!

How about something like this?

Quite simple really...you just need to specify the font colour of each letter. Remember to 'close' the font colour of EACH letter with "</span>". Click here to see what the coding looks like for this.