Creating a Web Page VII : Colour
Created | Updated Sep 15, 2002
Please refer to previous entries in the "Creating a Web Page" series:
"What I'd really like is a shade of pale puce..."
Colour can be described to a browser in two ways. You can simply use the name of the colour: "red", "blue", "black", "white", etc. This is quick and easy to remember, but not very accurate. Each browser, even each individual monitor, will be set to display a slightly different shade of the colour.1 To get more precision in the representation of colours, a system was set up called the hex number code.
It gets its name because there are 6 "numbers" for each colour. The "numbers" go from 0-9 and from A-F. 2 The first 2 numbers are how much red goes into the colour, the second 2 numbers are how much green go into the colour, and the last 2 numbers are how much blue goes into the colour. 3 So, a colour code of #000000 is black (no values for any of the primary colours), #FFFFFF is white (the maximum of all three mixed together), #0000FF is dark blue, etc. It would be unreasonable to expect anyone except professional designers to be able to mix n' match the colours accurately from memory. For a chart listing the most widely accepted colour palette, go to Visibone.
You've seen how other tags, such as the table or paragraph ones, can be made more specific with attributes. Now, it's the body tag's turn. The default colour scheme for your page is set in the body tag.
- BACKGROUND
- BGCOLOR
- TEXT
- LINK
- ALINK
- VLINK
The background can be either an image or just a solid color. "BACKGROUND" is how you tell the browser to use an image. Put the path of the filename if it is not in the same folder or directory as your page. (For example, many webmasters will create a separate directory for all the images on their site, so the tag would say BACKGROUND="/images/filename.jpg".) Even if you choose to have an image as your background, you should pick a colour, too as a backup in case there's a problem with the image and it doesn't load.
If you put this alone into the tag, the background will be a solid colour. If you put this combined with BACKGROUND, the background image will be the default, but if for some reason it doesn't load or your viewer has their browser set to surf without images, then this colour will come up instead.
The default colour for all text on the page.
This determines what colour the links are before the viewer clicks on them. Most browsers are set to blue as the default.
means "active link", the colour a link turns when the viewer actually click on it. (Frankly, since the viewer only sees this colour for a second when s/he is clicking on it, I don't think it's very important. You can skip it if you like.)
means "visited link". It's helpful to make links your viewer has already visited a different colour, especially if you have many links on your page. It will help them keep track of where they've already been.
Sample HTML:
< BODY BACKGROUND="filename" BGCOLOR="#RRGGBB" TEXT="#RRGGBB" LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#RRGGBB">This will set the default colours for the page. If somewhere you would like to change the font colour for just a piece of the text, you can now do that:
Sample HTML:
<FONT COLOR="#RRGGBB"> piece o' text</FONT>