Fonts are fine for decorating your webpage, but HTML defaults are black text on a white background. Nice in a novel...not necessarily so on a webpage. (Although studies have shown that dark text on a light background holds people's attention longer than vice versa.) Happily there are a number of color options available to us. We can change the background color of the entire page, of a table, or even of a particular cell of a table. You can even change the background color of a line of text. (Notice the background of the links on this page when you hover your cursor over them.) We can also change the color of any text that appears on our page. Color changes are done with HTML attributes, including bgcolor=, color=, and several link attributes. (We'll get to those.) Color is probably easier shown than explained. So, let's get to it. We'll start by changing the background color of the page.

Background Color - Changing the background color of your webpage is done using the HTML bgcolor= attribute, which can be used in a number of tags. For example, if you want to change the background color of an entire page, you would add it to the body tag of your document. (Most attributes that affect the entire page are put into the body tag.)


For our webpage, place the cursor inside the body tag, immediately after the word "body." Insert a space and type and type bgcolor="#CFBAA7". Like this:


You can also use a graphic image for your background, which we will be getting to in a later lesson. But, let's stick with adding color for now and move on to colored text.

Font Color - Now that we have a nice background color to go with our photograph, we need text that will match it. I personally like the text in black, but would like to add color to the headings. You, however, can use your own design sense for this or you can find a number of useful websites, like Hypergurl's Color Match page, to help you decide on a color scheme. (If you decide to change all the text, remember the basefont tag...but don't forget it's not really intended for that.) Our scheme comes from our main photograph and includes:

bground = #CFBAA7	border = #89582D	active link = #624A2E	heading & link = #892300	visited link = #0B6109

Of our options, the fourth one will stand out more against the background color, so we're going to apply that color to the headings. In HMTL text color is applied to the font tag using the color= attribute.

• Scan thru the document until you find the first heading "Tree of Life Garden" and put your cursor inside the font tag immediately after the value for the face= attribute.



• Type color="892300"



• Repeat for each of the heading tags in the document.



• Save and view your document.

Well, after viewing the document, it's beginning to look better, but...how do those links look to you? Mine are kind of a strange purple color that really doesn't look very good on that background. I think we need to change them.

Link Colors - HTML provides attributes for links you haven't visited, links you have visited, and links that are currently active (meaning you clicked on them and haven't moved your cursor elsewhere). Links you haven't visited use link=; already visited links use vlink=; and active links use alink=. Sorry, but if you want your link colors to change when you hover your cursor over them, you have to learn CSS...HTML doesn't provide an attribute for that.

Now, to change the links throughout our document to another color, we have to add these attributes with our chosen color values to the body tag. So, move back up to the top of your document and put the cursor in the body tag immediately before the ending >. I've chosen the colors as you see listed in the color chart above, but you can use whatever colors you prefer. Once you've finished adding your colors, your body tag should look something like this:


If you need help finding the hex codes for colors, I keep a chart on my website here: Color Chart. All you have to do is click on the colored boxes and the background will change to show you how the page would look, which allows you to see how the various colored text would look on that background. There's also a bar at the top that lets you play with the color mix until you find what you like. Once you make the bar the color you want, the hex color appears in the window to the right.