Recommendation for the Colors of Text Hyperlinks

Mastering CSS3 - Part 14

Forward: In this part of the series, we appreciate what kind of colors to give for the text of a group of hyperlinks in their different states.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 14 of my series, Mastering CSS3. In this part of the series, we appreciate what kind of colors to give for the text of a group of hyperlinks in their different states. I assume you have read the previous parts of the series before reaching here; this is a continuation. A hyperlink can have an image, text or some other html element as content. In this tutorial we consider only the case when the content of the hyperlink is just text (it could be formatted text also).

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Pseudo Classes for Hyperlinks
Consider one hyperlink. There is a pseudo class for the unvisited hyperlink; another pseudo class for the visited hyperlink, another pseudo class for the hyperlink on mouse over (hover); and another pseudo class for the hyperlink just after it has been clicked and the browser is in the process of looking for the web resource (page). This gives you four pseudo classes. The CSS code for a group of text hyperlinks would be something like:

a:link    {color:red; text-decoration: none}    /* unvisited links */
a:visited {color:blue; text-decoration: underline}   /* visited links   */
a:hover   {color:yellow; text-decoration: underline} /* user hovers     */
a:active  {color:lime; text-decoration: underline}   /* active links    */

In this tutorial, we learn how to choose the four colors for the for different pseudo classes (hyperlink states).

The unvisited Color
The unvisited color is the color of the text of the hyperlink, if the user is opening the web site for the first time, or if it has been long since the user opened any page of the site. You choose this color taking the overall web page view into consideration especially the body background color or body background image. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    body {background-color:bisque}

    a:link {color:blue; text-decoration: none}    /* unvisited links */
</style>
</head>
<body>
    <a href="link1">Hyperlink One</a>

</body>
<html>

In this code the body background color is bisque and the text color for the hyperlink is blue.

The color of text for the unvisited link has to be the most pronounced color for the link, relative to the background. The colors for the other states (pseudo classes) should not be as pronounced, relative to the background, but they should still be distinct relative to the background. So the colors for the other states should be similar to the unvisited color, but slightly less pronounced. In the present case, we have to look for colors that are like blue.

The other States
For the other states and for the present case, I have chosen cornflowerblue for the visited state, darkblue for the hover state and blueviolet for the active state. Read and try the following code; to actually see the four effects, the links have to point to real web pages:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">

    body {background-color:bisque}

    a:link {color:blue; text-decoration: none}    /* unvisited links */
    a:visited {color:cornflowerblue; text-decoration: underline}   /* visited links   */
    a:hover   {color:darkblue; text-decoration: underline} /* user hovers     */
    a:active  {color:blueviolet; text-decoration: underline}   /* active links    */

</style>
</head>
<body>

    <p><a href="link0">Hyperlink One</a></p>
    <p><a href="link1">Hyperlink One</a></p>
    <p><a href="link2">Hyperlink One</a></p>
    <p><a href="link3">Hyperlink One</a></p>
    <p><a href="link4">Hyperlink One</a></p>
    <p><a href="link5">Hyperlink One</a></p>
    <p><a href="link6">Hyperlink One</a></p>

</body>
<html>

Why Similar Colors
The four states need similar colors, so that each color should match with the background.

Summary
In choosing the colors for the four states of a group of hyperlinks, start by choosing the unvisited color. When choosing this color you take into consideration the general background (body element) of the web page. This color should be distinct and fit (match) with the background. The colors of the three other states should be similar to the color of the unvisited state, so that each of them fit (match) with the background; however, they should be slightly less pronounced.

That is it for this part of the series. We stop here and carry on in the next part.

Chrys

Broad Network

Recommendation for the Colors of Text Hyperlinks

Mastering CSS3 - Part 14

Introduction

Related Links

Comments