Colors and
BackgroundsColors and
BackgroundsThere are a number of things you can do to a page to change the appearance.
Colors in HTML are specified using a six-digit hexadecimal number:
#rrggbbwhere the first two digits (rr) specify the amount of red, the second (gg) the green, and the final two the blue (bb ). The colors are additive, so:
| white #ffffff |
gray #bbbbbb |
black #000000 |
| red #ff0000 |
green #00ff00 |
blue #0000ff |
See Doug's Color Spiel for more information.
Some of the colors have names, and can be referred to by name, but older browsers, such as Netscape 1.1, Mosaic, and IE 3.0 may not interpet them correctly.
| Black = "#000000" | Gray = "#808080" | Silver = "#C0C0C0" | White = "#FFFFFF" |
| Green = "#008000" | Lime = "#00FF00" | Olive = "#808000" | Yellow = "#FFFF00" |
| Maroon = "#800000" | Red = "#FF0000" | Purple = "#800080" | Fuchsia = "#FF00FF" |
| Navy = "#000080" | Blue = "#0000FF" | Teal = "#008080" | Aqua = "#00FFFF" |
So if you want a page with a green background, with yellow text and fuschia
links
that turn purple after they've been visited, and red when they're being
clicked), your
body tag will look like:
Background graphics are automatically 'tiled' (repeated) by the browser
to cover the whole background, unless
they are so big that they cover the whole background of the page. However, the
larger
your background is, the longer it will take to load, so you want to use a small,
tiled
graphic with a repeating pattern or texture. (Backgrounds with linear stripes,
like
the Lehigh Home page, use a long thin linear graphic, tiled down the page.)
Background graphics appear with the original color values, so you'll need to
adjust
the text, link, etc. colors to make your text readable. It's best to stay away
from 'busy' patterns, very strong colors, etc. because they interfere with
the readability of text placed on them. You may want to use a program like
Photoshop to 'fade out' your graphic for a 'watermark' effect.
Because background graphics take a while to load, you may also want to set a
background color which is similar to the predominant color in the graphic,
to make the transition look smoother.
You can also change the colors of specific pieces of
text.
You do this by using the COLOR attribute of the FONT element.
So, to make the above text fuschia, we used the tag:
BODY options
Attributes of the body tag are used to set the appearance of the entire
document:
<BODY bgcolor="#008000" text="#FFFF00" link="#FF00FF"
vlink="#800080" alink="#FF0000">
If you want to use a background graphic called texture.gif
(with a green background) added to this, it would look like:
<BODY background="texture.gif" bgcolor="#008000" text="#FFFF0
0"
link="#FF00FF" vlink="#800080" alink="#FF0000">
A note about background graphics:
FONT color
<FONT COLOR="fuschia">specific pieces of text
</FONT>
or
<FONT COLOR="#FF00FF">specific pieces of text
</FONT>
