7 Colours

7.1 Colouring Your Pages

You can specify the colours you want your page to display in via several attributes of the <body> tag at the start of your page, e.g.
<body BGCOLOR="black"> will set the background colour of a web page to black. Since the default colour for the text is black this could lead to problems, so we can use <body BGCOLOR="black" TEXT="white"> to make sure everything is still legible. 16 colours are defined:

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

Of course we often want a bit more control over exactly what shade we want. Many browsers have defined other colours in addition to these, but the best way is to specify the colour exactly in red-green-blue (RGB) format.

HTML's RGB colour definitions takes the form of a six-digit hexadecimal number, with two digits for each of the primary colours. Hexadecimal is a base 16 numbering system, with 0 to 9 representing their usual numbers and then the letters A to F representing the numbers 10 to 15. Thus a two-digit hexadecimal number varies from 00 to FF, which is equivalent to a decimal range from 0 ("none") to 255 ("full"). A selection of codes is shown below:

#000000 #666666 #CCCCCC
#660000 #006600 #000066
#CC0000 #00CC00 #0000CC
#666600 #006666 #660066
#CCCC00 #00CCCC #CC00CC

7.2 Colouring Links

There are three different colours that can be associated with hypertext links, all of them set via style attributes. The simplest way to set these is to use a <style> tag, which goes inside the <head>...</head> in your page, e.g.:


<head>
<style>
a:link {color:yellow}
a:active {color:magenta}
a:visited {color:blue}
</style>
</head>

which means:

  1. Links appear yellow initially.
  2. Links flash magenta when a user clicks on them.
  3. Links appear blue once the user has followed them.

Exercise 7

Change the background and text colours for your web page. If you like you can change the colours associated with the links as well.


Previous page Next page