Specifying colours
Sixteen colour names are standardised in CSS, and may be referred to by name. These
are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow.
The two main style types for colour are: 'color' and 'background-color'. Note the spelling of 'color' and 'gray' within
the CSS files.
However, most browsers are capable of displaying a large range of
colours.
To access other colours you must specify the colour as a mixture of red, green and
blue values, each in the range 0 to 255 (or hexadecimal #00 to #ff). To specify
a colour in hexadecimal simply supply the three colour values prefixed by the #
character. e.g. #0033CC is a mixture of #00 red, #33 green and #cc blue or
#0033CC
h1
{
color: #0033CC;
background-color: White;
}
results in the following effect:
This is an h1 element with color #0033CC
To use decimal notation (0 to 255) or percentages (0% to 100%) we need to use the
syntax: rgb(redvalue, greenvalue, bluevalue)
for example: rgb(85,190,255) is a mixture of 85 red, 190 green and 255 blue, or
rgb(85,190,255)
h2
{
color: rgb(85,190,255);
background-color: Black;
}
results in the following effect:
This is an h2 element with color rgb(85,190,255)
There is a recommendation that for basic colour work you should restrict yourself
to what is referred to as the 'web safe palette' of 216 colours. This is guaranteed
to work on all graphical colour browsers. Follow this link to see the
web safe colour palette.
Golden rule of Colour
Do not set background colour or foreground colour alone. Use them in combination,
and make sure the combination is legible. Reason: If you only set foreground colour,
this may not work well with the default browser setting for background colour, as
a user could have changed this to a value which makes the text illegible.