Lesson 6 - Color

Now that we have learned how to create many of the HTML elements, we can start working on some visual formatting. Up until now we have left everything in it default colors. In this lesson we will learn how to alter the colors of many of the elements we have discussed up to this point.

Since our next lesson is on CSS which gives us even more control over the appearance of our HTML elements, we will stick to the very basics this lesson. First let’s discuss the two different ways to enter a color value. Color values can be entered by there basic color name (Example: yellow, green, red, etc.) or by RGB hexadecimal values (Example: 123456, 789ABC, DEF123). Hexadecimal color numbers are in the format RRGGBB where RR is the two digit hexadecimal red value, equivalent to 0-255 decimal value, GG is the green value, and BB is the blue value. Two digit hexadecimal numbers can range anywhere from 00 – FF. To be considered a web safe color the red, green, and blue color must all be 00, 33, 66, 99, CC or FF. So, examples of web safe colors could be 0099CC or FF66FF. Let’s look at some example of how to use these colors on some of the elements we have already learned about.

Text:
The best way to format text colors is to use the font tag and use its color attribute. Examples:
Put some text here.
Produces:
Put some text here.

Put some text here.
Produces:
Put some text here.

Links:
Link colors are implemented in the same way as text.
Example:
<a href="http://www.weather.com/">Go To Weather.com</a>
Produces:
Go To Weather.com

Tables:
Tables have two color attributes that can be used on the table as a whole or on individual table cells. These attributes are bordercolor and bgcolor.
Examples:
Set the table colors this way:
<table cellspacing="0" width="200" bordercolor="#000099" bgcolor="lightgreen" border="3">
 <tr>
 <td> </td>
 <td> </td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 </tr>
</table>
Produces:

Set individual cell colors this way:
<td bordercolor="#990000" bgcolor="#FFFFFF">

Changing every other cell on the previous table to this color setting creates the following table.

Note that not all browsers support the bordercolor attribute on individual cells. I tested it on Internet Explorer and it worked fine but it did not alter the color on Firefox.

Neither the HTML form controls nor the HTML images discussed earlier have any color attributes, but we will see how to change these colors in the CSS lesson. There are no supplemental examples in this lesson. Please continue on to the next lesson to learn about cascading style sheets.