CSc 050: C O L O R

There are many ways to spice up your web pages with color. One is to change the color of the background, text, and hyperlinks by modifying the <BODY> tag. The other way is to change the color of individual words and letters (like in the word COLOR above.) This is done with the <FONT> tag.

Modifying the <BODY> tag

By making some adjustments to the <BODY> tag, you can change the color of the background, text, and links.

Backgrounds are easy. If you want to have a certain color in the background, you add it to the <BODY> tag. Like this:

<BODY bgcolor="#ffffff">

The ffffff is the code for white, in this case. Each color has it's own 6 character code. (Don't forget the pound sign before it. That's mandatory.) How do I know what color matches to what code? Well, I use this chart.

If you don't like those 6 character codes, you can also use actual color names. So:

<BODY bgcolor=white>

would have the same effect as ffffff above. The weird colors have names too. You can find a listing of them at this HTML Color Name site on the web. I personally find it easier to just use the chart and the codes when I need a strange color.

The bgcolor addition controls the background color. You can also use text to control the text color, link to control the link (hypertext) color, and vlink to control the color of a followed link (those links to pages you've already seen.) All of these options go inside your <BODY> tag.

So for this web page, for example, I used the following <BODY> tag:

<BODY bgcolor="#ffffff" text="#000000" link="#ff00ff" vlink="#cc6600">

which produces a white background with black text, unfollowed links which are pinkish and followed links which are brown.

The <FONT> tag

The text attribute of the <BODY> tag only changes the color of the text for the entire web page. What if you want different colored text within the same page? That's what the <FONT> tag is for. This tag has the following form:

<FONT color= some_color> ... </FONT>

where some_color is the color you want. Between the <FONT> and </FONT> tags is the text which you want to appear in that color. So to make the sentence:

Gotta love those Union Dutchmen!

I did the following in my HTML file:

<h3> Gotta love those <font color=maroon> Union Dutchmen!</font></h3>

You can also use those 6 character codes with the <FONT> tag too.

The <FONT> tag can do other things as well, like change the size of your font without the use of header tags like <h2>, etc. Check the Barebones guide for details, or ask your instructor. Spruce up your web pages! Add some COLOR!

Back to Tutorial Index