Color Me Crazy with HTML

All work and no play makes Jack and Jill dull students, right? If you spend lots of time working on your web page, surely you don't want Netscape to display it as ugly old text on a dull gray background? This page will show you how to use color to make eyepleasing pages.

Coming at you in Technicolor

There are several different ways to play with color in your web pages:

Changing the Color of the Body Text
Changing the Color of a Section of Text
Changing the Background Color
Changing the Color of the Links

Controlling the Text Color

To make all of the text on your page a particular color you need to do two things.

First, you need to find out the html code for that color. Each color has its own six digit code (sometimes they are a mix of numbers and letters). You can find lists of these codes in a number of places (there is a link from the CS111 Virtual Coursepack). In the case of the most basic colors, though, you don't need to do this--I'll show you why directly below.

The second thing you need to do is modify the BODY tag at the beginning of your HTML document to tell the browser what color the body text should be. Say you want to use blue text. To do this this the BODY tag at the top of your HTML document would look like this:

Now, I said that each color has a six digit code, why did I just use "blue" here? Well, the six digit code for blue is"#000011" but a handy revision in recent versions of HTML is the ability to use just the name instead of the code for the most common colors. I'm afraid if you want to use a weird color, "off-white," "tangerine-orange," or such, you still have to use the six digit code and your BODY tag would look like this:

Coloring Sections of Text

If you want to change the color of a word or a paragraph you need to use the FONT tag.

For example, the HTML code for the sentence above looks like this:

If you want to change the <FONT COLOR="red"> color </FONT> of a word or a paragraph you need to use the FONT tag.

Notice that the FONT tag only affects the text between the tags. If you forget to close the FONT tag, you will end up with a lot of colored text you did not intend. Also, the same thing holds for specifying which color you want with the FONT tag as for the BODY tag. If you want a basic color you can use just the name in parentheses. If you want something fancy, you'll need the code.

Background Color

To make full use of colored text you need to have control over the background color of the web page. It's like using colored construction paper. Your red crayon is awesome, but it doesn't show up well on red construction paper. This web page, however, makes use of colors which contrast dramatically.

To make your background you simply pick a color as you did for the body text and, again, modify the BODY tag a bit further. The HTML code for this page's body text and background color looks like this:

But perhaps you are wondering: what if I want my page to look like it has a funky texture, or to look like a brick wall, or clouds, or something cool like that? Excellent question but you get ahead of yourself. To do that actually requires that you understand how to put images in your page, which is the subject of the next page in this tutorial.

Changing the Color of Links

The last way to control the colors on your page is to control what color the links appear. You have control over the color an unvisited link is, what color a visited link is, and what color an active link is (ie, a link in the process of being clicked!) To tell browsers what colors the links on your page should you need to modify the BODY tag some more.

If you wanted your page to have unvisited links appear red, visited links appear pink, and active links appear blue, your BODY tag should look like this:

*Special Note: By this point you have seen several different ways to modify the BODY tag and you may be wondering if something will blow up if you try to use all of the different modifiers all in one BODY tag. The answer, thankfully, is no, nothing will explode. Just be sure to put a space between each modifier and you'll be fine no matter how many you stuff in there.