HTML Tutorial 06 – adding colour

1. The default background colour of a web page is grey – which is not very exciting.

2. That is, grey is the colour which will show in a browser window unless you tell it to do otherwise. Web design guru David Siegel says that web pages such as this are – “like slide presentations shown on a cement wall”.

3. There are three easy ways to add colour to your pages:

  • use FONT COLOR for text
  • use BACKGROUND COLOR for the page
  • use a graphic for a ‘background wallpaper’ effect

4. Let’s look at each of these options in turn.

The font colour tag

5. When you specify the FACE or SIZE of your FONT, you can also say what COLOR you want it to be.

<FONT=”Arial COLOR=”RED”>my web pages</FONT>

This would produce the following effect.

The words ‘my web pages‘ are coloured red.

6. Other common colours are as follows.


Background colour

7. Background colour can be used to give colour to a page.

8. The code is inserted into the <BODY> tag at the top of your page. Notice that the term ‘background’ is abbreviated to BG.


9. The problem with most of the standard colours is that they are rather strong. They are too demanding, not quiet enough.

10. It is better to choose something more quiet and restrained.

BGCOLOR=”WHITE” is always safe.

BGCOLOR=”#FFFFEF” is more subtle.

[Don’t ask! Just use “#FFFFEF”.]

11. Note that the tag must be given its American spelling of COLOR. This is a very common technical problem.

Tiled graphic file

12. You can also create a coloured background for your page by using a graphic image. This will be ’tiled’ [repeated to fill the space] by
your web browser.

14. The code goes into the BODY tag at the head of your page. Notice that in this case the full term BACKGROUND is used.

<BODY BACKGROUND=”stripe.gif”>

15. You would save the graphic file ‘stripe.gif’ in the same folder as your .htm page.

16. But a tiled graphic makes reading more difficult. It almost always results in a visually disruptive page.

17. It’s usually much better to use a single colour – one which is muted and subtle. Choose something against which black text will stand out clearly.

18. Here are a good example and a ridiculously bad example.

© Roy Johnson 2002



  • Study Skills 2.0 (html)Study Skills 2.0

    Study Skills covers every aspect of study skills – reading, writing, research, revision, exams, and even presentations. Learn how to absorb information quickly. Study effectively by using good time management skills. How to digest books and summarise their contents. Suitable for all students in further and higher education. Runs in any Web browser. Latest version […]

    Order Study Skills 2.0 Study Skills 2.0 @ £4.95

Buy from Amazon US     Buy from Amazon UK

You can leave a response, or trackback from your own site.

If you found this article interesting you might want to Tell-A-Friend.

Tell A Friend
  1. (required)
  2. (valid email required)
  3. (required)
  4. (valid email required)

cforms contact form by delicious:days

Leave a Reply


Powered by eShop v.6