The Body

Where the Content Is

When you think of a web page, you don't think about the title bar, nor do you think much about the extra programming code which is done "behind the scenes." Instead, you think about the stuff in the main part of the browser window. This area is in the body of the HTML code.

The body command controls this area. If you want to make a design change that will affect everything on the page, you would place it as an attribute in the <body> command. In plain HTML, there are only a few things you can change, however; these include the color of the text, the color of links, and the background color or image. These are the attributes to control them:

Attribute Values Description
background= "image_location" sets a background image. If the image is smaller than the window, then it "tiles" (repeats horizontally and vertically) to cover the whole window space.
bgcolor= "color" sets a solid color background (standard default is white).
text= "color" sets the default font color for the page (standard default is black). The "FONT" command overrides this color.
link= "color" sets the default color of unvisited links (standard default is blue)
vlink= "color" sets the default color of visited links (standard default is pruple)

An example of a BODY command with all attributes:

<body bgcolor="lightblue" background="paper.jpg" text="darkred" link="orange" vlink="gray">

NOTE: if used together, the BACKGROUND attribute will "cover up" a BGCOLOR designation.

A Note on Colors

You may notice that in the examples, I use words to designate colors--for example, I used lightblue, darkred, orange, and gray just above. There are about 140 colors which you can spell out in English, and your web page will show the colors correctly. However, be careful: they must be spelled correctly, or else they will show up as strange colors, not what you intended. Also note that they are always one word--so if you have a color with two words, they must be put together without a space, like "aliceblue" or "antiquewhite".

To help with colors, here is a link to a page which shows 147 different color names which can safely be used in HTML.


If you do not specify colors for the BODY command, then the browser will use the default colors automatically:  white  for the background, black for the text, blue for the links, and purple for visited links.


Let's try out the BODY tag attributes in the live-test window below. In this exercise, you should only make changes to the BODY command at the very top; the rest of the content is example text to show you how the changes appear. So you should just work with the top line, and change various attributes.

I have already added the BODY command, along with a few links to show you how they'll change in appearance. To test the BACKGROUND attribute, use the images "paper.jpg" or "paper.gif" which I have included with this page so it will work below:

Did you add the "background" attribute and try to paper image backgrounds? If not, go back and do it!

You may also have noticed how some color combinations did not work--if you used a light background and a light text color, the text became hard to read. This is important when choosing colors for your web pages.



Video Review