Adding Color to Your Site

Last update on: 05-24-2008
When building almost any Web site, you will want to add color to your pages, and there are a lot of ways in which you can add color. As you will see, you can add color to your site through the use of images, but you are also likely to want to change the color of headings, paragraphs of text, page backgrounds, borders, and so on.

Using Hex Codes to Specify Colors:

When you start using hexadecimal codes (or hex codes for short), they can appear a little daunting. The idea that colors are represented by a mix of numbers and letters might seem a little strange, but what follows the # sign is actually the amount of red, green, and blue that make up the color. The format for hex codes is: #rrggbb here are some examples:

Color	Hexadecimal Code
Black	#000000
White	#FFFFFF
Red	#FF0000
Green	#008000
Blue	#0000FF

Using Color Names to Specify Colors:

Rather than using hex values to specify colors, you can also use color names such as red, green, and white to specify the color you want. There are over 200 different color names supported by Netscape and IE.

While names might sound a lot easier to understand than hex codes, some of the colors are easier to remember than others, and remembering which color each of the 200 names looks like is a tall order. Here is a sample of some of the color names:

aqua, beige, coral, darkcyan, firebrick, green, honeydew, indianred, lavenderblush, maroon, navy, oldlace, palegreen, red, saddlebrown, tan, white, yellow

So, if we know how to define our colors lets see which attributes used to change text, background ... colors.

Changing Background Color of a Page:

To change a page's background color, decide what color you want and then add the bgcolor attribute to the <body> tag.

<body bgcolor="#ffffff">
<!-- Or with name -->
<body bgcolor="white">

Changing Text Colors:

<body> tag has other attributes to change text, links, visited links and active links colors these attributes are:
text: Controls the color of all the page's body text except for link text, including headings, body text, text inside tables, and so on.
link: Controls the color of link text for links that the user has not already clicked on.
vlink: Controls the color of links that the user has already visited.
alink: Controls the color of a link while the user is clicking on it. When the user clicks on a link, it changes to this color. When he or she releases the mouse button, it switches back.

Spot Color:

When you change a page's text colors by using attributes to the <body> tag, that change affects all the text on the page. Spot color is the ability to change the color of individual characters on your page, which you can use instead of or in addition to a global text color.

Specifying Colors with CSS

Needless to say, there are ways to specify color on a page using Cascading Style Sheets. First, let's look at how colors are specified using CSS. The two methods available in HTML are also available in CSS. You can specify colors by name or by using a six-digit hexadecimal specification. There are some other options as well. You can specify colors using a three-digit hexadecimal number, which is shorthand for cases where both digits in each pair are the same. For example, if the color you're using is #FFFFFF (white), you can just specify it as #FFF. Or, if you want a light blue such as #66CCFF, you can specify it as #6CF.

You can also specify colors using decimal values or percentages. For example, #66CCFF can be specified as (102, 204, 255) using decimal notation. Or, if you prefer, using percentages, like this: (40%, 80%, 100%). If you don't want to worry about these alternative methods, that's fine. You can just use the same ones that you use when specifying colors in HTML.

Examples:

The some thing you can do for the <body> tag.

This page will have white text on a blue background.

Images Color Backgrounds's lessons:

Adding Images Using The Img Element
Adding Color To Your Site
Adding Image Backgrounds