Body and Background Color & Graphics

Setting Background and Text Colors

The default background color for most browsers is light gray or white.  You can change this color fore your Web pages.  You can set the background color to any color that can be described with an RGB value.   (Color specified by combinations of Red, Green & Blue)

Opening tag Closing tag Description
<body bgcolor="#hex_rgb"> </body> Sets the background color to the color you specify with a six digit hexadecimal value (base 16 #)  For example this page uses the body tag:

<body bgcolor="cornsilk"> which is equivalent to: <body bgcolor="#FFF8DC ">

 

RGB value Color RGB value Color
FFFFFF White 008000 Green
000000 Black 00FF00 Lime
C0C0C0 Silver FFFF00 Yellow
808080 Gray 808000 Olive
FF0000 Red 000080 Navy
800000 Maroon 0000FF Blue
800080 Purple 008080 Teal
FF00FF Fuchsia 00FFFF Aqua

An RGB value is a number made up of three bytes- one each for a red value, a green value, and a blue value- which gives you a palette of more than 16 million colors to choose from.  RGB values are expressed in hexadecimal notation.  The above table lists the 16 basic color names.

You can also control the color of the text in your Web pages.  You can set the color for body text, links and links that have already been visited.  You can also set the color for the text of an active link; the link a user is clicking on.   However, because users can set their browser preferences to view a Web page with a particular text or link color, users will have the final say in how they view your page.   The table shown above describes the tags you can use to set text colors.

Opening tag Closing tag Sets the color of
<body text="#hex_rgb">
or
<body text="color_name">		 </body> Text to the color you specify with a six digit hexadecimal value or color name
<body link="#hex_rgb"> </body> Unvisited links to the color you specify with a six digit hexadecimal value.
<body vlink="#hex_rgb"> </body> Visited links to the color you specify with a six digit hexadecimal value.
<body alink="#hex_rgb"> </body> Active links to the color you specify with a six digit hexadecimal value.   A link is active while you are clicking on it.
<body link="#hex_rgb"
vlink="#hex_rgb"
alink="#hex_rgb">		 </body> <body link="#FF0000"   vlink="#0000FF" alink="#00FFFF">

Font Colors:

<font  color="#ff0000">Red</font> produces text:  Red

<font  color="#0000ff">Text</font> produces text:  Text

<font  color="green">Hello</font> Everyone  produces text:  Hello Everyone:

<font color="red">E</font><font color="blue">N</font><font color="yellow">D</font>  produces text:  END

Color Charts:

Background Graphics:

Opening tag Closing tag Purpose
<body background="filename"> </body> Fills the background of the Web page with the graphic you specify.

In addition to setting background colors, you can also fill the background of your Web page with a graphic.  If the graphic you specify is not large enough to fill the entire browser window, the browser will tile( or repeat) your graphic as many times as necessary to fill the entire window.  The above table describes the tag you can use to set a background graphic for your Web pages.  More extensive notes and examples of background images can be found in my more graphics notes.

[top]

This page was last updated on 02/04/2008 by L.M. Hicks