There are two basic ways to control the color of your text, text links, and
background area behind the text and links. One way is to set the overall
"default" colors using several arguments or parameters to the
<BODY> HTML tag (which should be near the
top of your html file. The other way is to set each text item or link
individually. You can use one method or a combination of both - whatever
you like! One thing you want to keep in mind, however - If you do use an
individual setting on an item, it will override the default setting in
the <BODY> statement for that one item.
The Text Color (TEXT) Parameter
To set the default color for all the text in your page (excluding any
text which is part of an active link), we can add the
TEXT= parameter inside the
<BODY> HTML tag. For example, to make
all the text on your page black, our BODY statement would look like
this:
<BODY TEXT="black">.
That was simple!
This is useful if you want some or all of the text on your page
to be the same color. That way, you can control or change the color
simply by changing the setting in one place. Another benfit to this
method is that it can be overridden for specific sections of text
on your page.
Since this is part of the <BODY> HTML tag, it is effective
up to the </BODY> HTML tag at the end of your page.
Tips on using the TEXT color parameter:
- Select a color that contrasts well with your background, regardless
of whether you are using a solid color or a graphic image for your
background. People may skip over your site without reading it if it
is hard to read.
- Don't overdo the use of color - try to keep most of your text all
the same default color. Emphasizing text items by displaying them in
a different color loses effectiveness quickly if it's done too much.
The Background Color (BGCOLOR) Parameter
The background color of your page is very important - it is the blank
canvas upon which you paint your cyberspace masterpiece. The
background is not to be taken lightly. There are tens of thousands
of webpages all over the web that are ruined simply because of a poor
choice in a background. You have a choice of having either a graphic
image or a solid color as your background. Using an image as a
background will be dealt with in another section - here, we will
illustrate setting a solid color as a background. Let's look at the
code to make our background a light dove grey:
<BODY TEXT="black" BGCOLOR="lightgrey">
.
See? You don't have anything to worry about - this HTML
stuff isn't so bad, is it?
Tips on using the BGCOLOR color parameter:
- Select a color that is easy on the eyes to look at. "Fire Engine
Red" or "Blazing Yellow" are very attention-getting, but your page
viewers will get tired of them very quickly, and move on.
- Workplace studies have shown that whites or light pastels make
the best background colors for lengthy viewing. And, if you feel up to
a little trickery, there are many studies on the psychological effects
of certain colors on the human mind! You're already out on the Web,
what are you waiting for? Go Explore!
The Visited Link Color (VLINK) Parameter
Let me introduce you to a new kind of color parameter - one that has
a "mind of it's own"! This parameter remembers which links you've
already been to, and which ones you haven't yet visited. This allows
your page readers to quickly tell which pages they have already seen,
so they don't waste their time by going to the same place twice. Let's
say we want to make all the links to places we've already visited a
nice, environmentally-friendly green. Let's look at what we would add
to our BODY statement:
<BODY TEXT="black" BGCOLOR="lightgrey"
LINK="darkblue" VLINK="green">.
Tips on using the VLINK color parameter:
- Try to select a color that does NOT contrast quite as much as the color
you've selected for unvisited links. You want to direct your viewer's
attention more towards the links remaining to be visited, and away from
the ones they've already seen. Try to make them "fade into the background"
just a little bit.
- You might even have a case here for making visited links the same
color as your text, but I would still recommend making them their own
distinctive color. A user might WANT to go back and see one of your
pages again, and we certainly don't want to disappoint them!
- Never annoy your webpage readers!
The Active Link Color (ALINK) Parameter
While we're on the subject of Link colors, here's one additional
parameter you can use. This one is only visible for a fraction of
a second, so it's not used very much, but I'll go ahead and tell you
about it. This parameter will change the link to the specified color
only as it's being clicked by the reader. It can be used as
kind of like a visual confirmation to the page reader that they did in
fact click on the link. Here's how to make your links show up a bright
yellow while they are being clicked:
<BODY TEXT="black" BGCOLOR="lightgrey"
LINK="darkblue" VLINK="green" ALINK="yellow">.
Tips on using the ALINK color parameter:
- This only lasts while the mouse button is down, so you can't get
yourself into trouble here. If you were the devious type (like me),
you could even make the link "disappear" by making it the same color
as your background. But, don't let me lead you down that dark path....
- First things first, but not necessarily in that order....
The Font Color (FONT COLOR)Statement
Now, at last we come to the "other" way of setting our colors - the
way to set items midstream in the page, overriding the default
settings. This is the best way to highlight a word or phrase
within the text of your page. We accomplish this by enclosing the
letter, word, or phrase with the <FONT COLOR=>
and the </FONT> html tags.
Like most all HTML tags, there is a beginning and and ending tag,
and the statement affects everything between
the beginning and ending tags. You notice how I made the word
"beween" appear in dark cyan in the previous sentence? Let me show you
how I did it:
...everything <FONT COLOR="darkcyan"> between
</FONT> the...
Suppose you wanted to make just one
letter in a word a different color? It works just the same way, just
look at this:
...just <font color="darkcyan"> o </font>
ne letter...
We can also do whole sentences and paragraphs, just by carefully
positioning where the ending </FONT>
is.
How about something that's really,
REALLY exiting? I just "nested" one
"FONT COLOR"..."/FONT" statement group inside another "FONT COLOR"...
"/FONT" group. Want to see what it looks like? I knew you did, that's
why I already typed it up for you right here:
...something that's <FONT COLOR="darkcyan">really,
<FONT COLOR="lime">REALLY</FONT> exiting</FONT>
?...
Notice how when the inner statement group was closed out, the outer
one was still in effect, and the word "exiting" displayed in dark cyan,
until it was properly ended with the second "/FONT" tag. This can be
very useful if you plan it this way, or it can really catch you by suprise
if you didn't mean for it to happen.
Tips on using the FONT COLOR statement:
- One of the easiest mistakes to make when using the
<FONT COLOR=> statement is to forget to put in the closing
</FONT>. If you do, everything after the
"FONT COLOR" will be affected until it finds the next available "FONT"
tag, or the end of the page, whichever occurs first.
- If you have so many of these in your page that it's becoming
difficult to keep track of them, then you probably have too many!
Of course there always exceptions, but the K.I.S.S. rule generally
applies here.
Color Table
In these examples, I have opted to use the literal color names.
Older browsers used to refer to colors by hexadecimal color pairs, but
this made for cumbersome coding, since every time you wanted a specific
color, you had to look it up in a color chart to see the corresponding
hex value. Newer versions of browsers can now directly reference
standard colors by name, making it a lot easier to code colors into
your html files. I have included a table below that references many of
the available colors by their name. If you would like to see a table of
colors by hex codes,
Click here.
If a color name does not seem to match the color displayed, then in all
likelihood your browser doesn't support that color name.
Get your own free page!