Color
A browser will automically determine the colors for the background, text, and links in your WWW documents based on the default settings. Or, using color attributes, you can exercise a great deal of creative control to add pzazz to your WWW documents. For example, you can define the background color, the text color (for the entire document, for only specific sections, or even just for specific words). You can also define the colors of the links in your WWW documents.
There are thousands of colors you can choose from when making your WWW documents. To see examples of 140 colors and their hexidecimal codes, use the Eazy-Peazy Color Chart.
Different browsers, computers, and operating systems display colors differently. What looks good on your computer may not look so good on another. There are, however, several colors thought to be "web-safe" in that they will display the same way no matter what type of computer and browser someone is using to view your WWW document. To see these colors, use the Eazy-Peazy Web-Safe Color Chart.
To see how different background, text, and link colors can be used to create attractive and useful WWW documents, experiment with the Eazy-Peazy Color Chooser.
You can use the attributes shown below to customize the colors in your WWW documents.
| Color Attributes: How They Work | |
|---|---|
|
BACKGROUND COLOR The bgcolor (BackGround COLOR) attribute allows you to define a background color for your WWW document. To experiment with changing the background color of a WWW document, use the Background Color Example Page. The bgcolor attribute can be defined inside the <body> start tag either as a name | |
| <body bgcolor="yellow"> | |
| or a hexidecimal code. | |
| <body bgcolor="#FFFF00"> | |
| Note: The desired color in each example ("yellow" and "#FFFF00") should be enclosed in quote marks as shown here, and above. | |
|
TEXT COLOR The text color attribute allows you to define the color of the text in your WWW document. Text color, like bgcolor, can be defined within the <body> start tag either as a name or a hexidecimal code. Note: The text color ("red" in this example) should be enclosed in quote marks as indicated here, and below. | |
|
<body text color="red">This text is red.
or <body text color="#FF0000">This text is red. Appearance in your WWW document:
| |
| Note: If you include the text color attribute within the <body> start tag, ALL text in your WWW document will be the color you define, unless you change the text color at specific places within your document. | |
|
COLOR FOR LINKS The links in your WWW document are "static," "active," or "visited" depending on whether they have been selected. You can define the color of each of these three states of your links using the tags demonstrated below. These tags are included within the <body> start tag. Choose "Body" in the menu to the left for more information on defining links in the body portion of your WWW documents. Link Color The link (static link) tag defines the color in which any link is initially displayed in your WWW document. You can use any color you like for this link. See "Color" in the menu to the left for more information. You can customize how static links appear in your documents as shown below. Note: The desired color attribute of the static link ("blue") should be enclosed in quote marks as shown here, and below. | |
|
<body link="blue">
Appearance in your WWW document:
| |
|
ALink Color The alink (Active LINK) tag defines the color any link will turn when it is selected. You can use any color you like for this link. See "Color" in the menu to the left for more information. You can customize how active links appear in your WWW documents as shown below. Note: The desired color attribute of the active link ("green") should be enclosed in quote marks as shown here, and below. | |
| <body alink="green"> | |
|
VLink Color The vlink (Visited LINK) tag defines the color of any link that has been previously selected. This can be useful as a reminder to your viewers as to what links they have followed in your site. You can use any color you like for this link. See "Color" in the menu to the left for more information. You can customize how visited links appear in your WWW documents as shown below. Note: The desired color attribute of the visited link ("purple") should be enclosed in quote marks as shown here, and below. | |
| <body vlink="purple"> | |
| All Together | |
|
<body link="blue" alink="green" vlink="purple">
Appearance in your WWW document:
| |
| Click this link and see what happens, especially when you return. Do you see how the colors change? |