Scripting Master Logo
Learn Scripting Languages from the Master!

Specifying text colors

Home : XHTML > Using colors > Specifying text colors

There is probably hardly any page that does not have text colors manipulated in some fashion. Just as the background colors, text colors can enhance the appearance of your webpages. Text colors can be set in number of ways, including:

  • links, specifically:
    • unvisited links
    • active links
    • visited links
  • body text

If you are choosing a dark background, the default body black text is not an appropriate choice because of low contrast between the page background and text. Consequently, the text would be difficult or impossible to read. To avoid readability problems because poor color choices, aim for colors that result in high contrast. High contrast is a result of either:

  1. lighter text on darker background, or
  2. darker text on lighter background

Because of low contrast concerns if you do not change the default colors for your webpages, visitors to those pages may find those pages simplistic or too generic. So all this discussion comes down to choosing colors that suit the needs of your website (or adequately reflect your preferences) while ensuring pages are easier to read and navigate.

Link colors

Link color text refers to the text that activates a link. In other words, it is the text that is clickable or clicked. In the context of setting links colors, links can be in one of these states:

  1. unvisited — this represents those links that are not yet followed. By default, blue is the default link color for unvisited links
  2. active — this represents a link that is selected (i.e., when the mouse hovers over the link).
  3. visited — this represents those links that have been already followed or clicked. Purple is the default color for visited links.

Although the default link color choices are adequate to help users navigate and distinguish the states of links, needs rise to make links visible or personalized because of other color choices of the web page. If, for instance, you set the background of your pages to blue, unvisited links would be difficult to spot. Similarly, using blue as the text color on a white background can also make it difficult to spot unvisited links because they will also be in blue. So choices of background colors and body text colors can and do influence the link color choices.

Changing text colors

Traditionally, body color text and link color text was changed (and the practice is still in use) using the attributes listed in table 1. In favor of style sheets, these attributes have been deprecated. Therefore use of these attributes should be avoided.

Table 1 attributes for changing body text color and link color text
Attribute Value* Purpose
text #0000FF Sets color for all the text within a document. <body text="#0000FF"> specifies to use the blue color for all the text on the page.
link #00FF00 Controls unvisited link color text. <body link="#00FF00"> specifies to use the green color for text that represents a link.
alink #FF0000 Controls color of active link text. <body alink="#FF0000"> specifies use the red color for link text whenever the mouse hovers over the link text.
vlink #FF7F00 Controls color of visited link text. <body vlink="#FF7F00"> specifies use the orange color for links that have already been visited by the user.
*Specified as a color name (i.e, blue, red, green, etc.) or a RGB value (i.e, #0000FF, #FF0000, #00FF00, etc.)

Note: Localized styling specifications (styles close to text that appears on a web page) override global color settings specified inside the body tag!

When you use attributes to change text for the entire body of a web page, you need to add all of those attributes to just one body tag. For instance,

<body text="#0000FF" link="#00FF00" alink="#FF0000" vlink="#FF7F00">

sets blue, green, red, and orange colors for body text, unvisited link text, active link text, visited link text, respectively. Notice each attribute is separated with a space character. The following shows how to specify the same text color settings using a style sheet specification:

<style>
body{
color:#0000FF; /* sets text color to red for the whole document */
}

a:link{
color:#00FF00; /* sets link color text to green */
}

a:active{
color:#FF0000; /* sets active link color text to red */
}

a:visited{
color:#FF7F00; /* sets visited link color text to orange */
}
</style>