Enterprise Software

Setting background and text color

Are you setting background and text color to your Web page? If so, here's some HTML information that you won't want to miss.

By Fred Dekker and Donald St. John

The <BODY> tag uses several important attributes to control the look of your page. Use the BGCOLOR attribute and value to change your page's background color. Version 3.x and later browsers can read some colors from a list of standard English words, such as white, blue, black, and the like. But to take advantage of all Web-safe colors, you'll need to use hexadecimal color codes. VisiBone's Webmaster's Color Lab displays safe colors with their hex codes, allowing you to view colors in different combinations and side by side. By selecting several colors at once, you can quickly create an entire color scheme for your site.

Keep in mind that most browsers can display colors from a palette of only 256 different hues and shades. If you use a color that's not in the palette, the browser will try to choose a similar one. If you want to guarantee that your colors will appear as close to your original choices as possible, select colors from Netscape's 216 browser-safe colors (a simplified subset of the Mac's and PC's 256-color palettes.

For our sample page, let's keep things simple and use a plain white background. The hexadecimal code for white is #FFFFFF, so we'll add an attribute to the existing <BODY> tag so that it reads:

<BODY BGCOLOR="#FFFFFF">

Background Images

You can also use an image as your background. Any image you choose will tile into the background—that is, it will go into the background without changing size and then reproduce itself over and over to fill the page. Never use a background that makes text difficult to read. To tile an image, add the BACKGROUND attribute to the BODY tag (bgimage.gif is a sample background image):

<BODY BACKGROUND="bgimage.gif">

In the end, the E-Z Accounting team decided to stick with a simple white background to keep the design uncluttered, make the text easy to read, and ensure that the links stand out.

Text Colors

You can apply hex or name values to attributes of the <BODY> tag to designate the color of your page's regular text and linked text. The TEXT attribute sets the color of the regular text. The LINK attribute controls the color of linked text. VLINK designates the color of a followed link; it's helpful when you're presenting a list of links because it lets your users distinguish the pages they've already visited. Finally, ALINK designates the color that links become when clicked. ALINK is usually the same value as VLINK. For our page, we're going to have black (#000000) text and bright blue links (#33FFFF) that turn dark purple (#330066) when clicked and followed:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#33FFFF" VLINK="#330066" ALINK="#330066">

You'll see just how this color scheme looks when you add text and links.

Fred Dekker is one of the Founders of The H.E.L.P. Community, an online resource for beginning Webmasters.

Donald St. John was the founding Webmaster at PC Games magazine.

Editor's Picks

Free Newsletters, In your Inbox