So far our web pages have been created with the default colours of the users browsers. This is usually black text on a white or grey background with blue links and purple visited links. There are good arguments for not changing this: people are used to those colours, they know that blue means a link without having to think about it, if they find their browser's defaults hard to read then they will change them.
But we all want to exercise our creativity and make our pages stand out from the crowd. So let's look at adding a bit of colour.
To alter the basic colours of the whole page we add some new attributes to the BODY tag. The BGCOLOR attribute sets the colour of the background, the TEXT attribute sets the colour of the text, the LINK, VLINK and ALINK attributes set the colour of unvisited, visited and active (i.e. in the process of being used) links. A browser will remember which links it has visited up to an amount set in it's configurations after which it will revert to the unvisited colour.
Each of these attributes takes a value which can either be a keyword or a hexadecimal RGB value.
There are sixteen keywords defined in the official HTML specification. Some browsers support others but as not all do you're better off using RGB values for other colours. The sixteen keywords (with, for reference, their equivalent RGB values) are:
By a strange coincidence these are the same as the sixteen colour Windows palette.
Hexadecimal RGB values sounds a bit technical. What it means is a colour defined by a varying amounts of red, green and blue light. Each colour can take a value between 0 and 256. That gives 256 shades of red, green and blue, or 256 x 256 x 256 = 16777216 total possible colours!
The value from 0 to 255 is written in hexadecimal. This is a base sixteen number system. So 10 = A, 11 = B, 12 = C, 13 = D, 14 = E and 15 = E. 16 = 10, 31 = 1F, 32 = 20 all the way up to 255 = FF.
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
| 2 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
| 3 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
| 4 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
| 5 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
| 6 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
| 7 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
| 8 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |
| 9 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 |
| A | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 |
| B | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 |
| C | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 |
| D | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 |
| E | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 |
| F | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 |
To use the matrix above to convert from Decimal to Hexadecimal: look up the decimal number you want in the main body of the table. The Hexadecimal equivalent is the digit in the left hand column followed by the digit in the top row. e.g. 200 is C (from the left hand column) followed by 8 (from the top row), C8.
To use the matrix above to convert from Hexadecimal to Decimal: Look up the first digit in the left hand column and then cross reference that with the second digit in the top row. e.g. 79 is 7 in the left hand column and 9 in the top row which gives a decimal value of 121.
After you've converted your colour values to hexadecimal all you do is write the two digit colour for red down followed by green followed by blue. So from the list above Aqua is 00FFFF meaning that it has no red and the maximum amount of blue and green. Giving it a very bright blue-green appearance. Black is 000000 and White is FFFFFF.
These values are written into the HTML as part of the BODY tag: <BODY BGCOLOR="#FFFFCC" TEXT="black" LINK="#FF9933" VLINK="#663300" ALINK="#0066CC">
The hash (#) is needed to tell the browser that this is an RGB value and not a keyword. Most browsers are actually smart enough to know that FF0000 is an RGB value but we're writing good HTML here so lets always include the hash.
Once upon a time lots of people had computer monitors and graphics cards that could only display a few hundred colours at a time. Windows and Macintosh were both operating systems which grabbed certain colours for their own uses. That left only a small number of colours available to be used on web pages (if you tried to use more colours they would dither and look nasty).
A restricted, web safe palette was developed. There's no real need to use it anymore but it can still be a good idea to stick to it for backgrounds and text. The restricted palette says that the red, green and blue components can only take six values, these are 00, 33, 66, 99, CC and FF. 6 x 6 x 6 = 216 colours in the whole palette. These values are marked with red backgrounds in the matrix above (stylesheets permitting). Note that only half the keywords are actually in this palette, but the other half will still appear okay on Windows machines as they're in the colours reserved by Windows.
How did I make those items in the list above appear in different colours to the rest of the text on the page? I used an inline element called FONT. This element can take a number of attributes, one of which is COLOR.<FONT COLOR="#FF00FF">This is fuchsia text</FONT> produces this: This is fuchsia text.
FONT is a quite powerful element as with other attributes it can change the size and face of the text. But it is vulnerable to several browser bugs and accessibility problems. It's one of the deprecated, presentational elements that I mentioned in part two. Later on we'll learn other ways of setting colours which don't have these problems.
Changing the background colour for selected portions of the page, adding coloured borders and colours which change as you move the mouse over them will have to wait until we've learnt about TABLES and CSS in later parts of this course.