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

Here's what your page would look like. Web design guru David Siegel says that web pages such as this are - "like slide presentations shown on a cement wall".

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

5. Let's look at each of these options in turn.

The FONT COLOR tag

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

This would produce the following effect.

The words 'my web pages' are coloured red.

7. Other common colours (here used as background) are as follows.

[Notice that we've used <FONT COLOR=WHITE> to provide contrast against the darker colours.

Aqua	Fuchsia	Olive
Green	Lime	Purple
Blue	Silver	Maroon
Gray	Yellow	Teal
Navy	White	Black

BACKGROUND COLOR

8. Background colour can be used to give colour to a page or to parts of a table [as we have just seen above].

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

The problem with most of the standard colours is that they are rather strong. This is a striking background - but it's not quiet enough. It's too demanding.

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

[Don't ask! Just use "#FFFFEF".]

11. You can also add background colour to the data cell in a TABLE.

some text

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

Tiled graphic file

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

15. You would save the graphic file 'stripe.gif' in the same folder as your .htm page. The effect would be as follows:

Tiled background

1. A tiled graphic can be rather distracting. This striped effect makes reading very difficult.

2. No matter how much text is written here, you will find it hard to read. The background is interfering with the text on screen.

3. This makes the reading experience very uncomfortable.

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

Coloured background

1. A single plain colour can be quite distinctive.

2. The text written here is easy to read.

3. The background is not obtrusive.

4. This makes the reading experience more comfortable.

Home - Books - Reviews - Tutorials - Software - Download - Orders - Newsletter