CSS Links ( Pseudo-classes )

Probably the coolest thing about CSS is that it gives you the ability to add effects to your anchor tags, otherwise known as links. In HTML, the only way to add this effect would be to use JavaScript, but with the addition of CSS, JavaScript links can be forgotten.

Advertise on Tizag.com

CSS Anchor/Link States

You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

• link - this is a link that has not been used, nor is a mouse pointer hovering over it
• visited - this is a link that has been used before, but has no mouse on it
• hover - this is a link currently has a mouse pointer hovering over it/on it
• active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states, but at the end of this lesson we will suggest a good practice for CSS Links.

CSS Pseudo-Classes

The format for CSS Links is a little different from what you've seen in this tutorial so far. To modify these four states, you have to use the following CSS code formatting:

CSS Code:

a:(STATE'S NAME) { attribute: value; }

The state's name is the "pseudo class" that defines how the HTML element should appear, depending on which state it is in. Below is an example of changing the "link", "visited", and "hover" state. Note the order that they are defined, as it is the proper ordering to make a functioning CSS link.

CSS Code:

a:link { color: red; }
a:visited { color: red; } 
a:hover { color: blue; } 

HTML Code:

<a href="">This is a special CSS Link</a>!

Display:

This is a special CSS Link!

The states must be defined in the correct order. Here is the order, starting with the one you must define first:

1. link
2. visited
3. hover
4. active

Removing the Default Underline

Throughout Tizag.com you probably have noticed the different styles that we have for certain links. Our menu's do not have an underline, unless you are hovering, while the links in our main content do have underlines. To remove the underline from certain states of a link, use text-decoration: none.

CSS Code:

a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; } 
a:hover { color: blue; } 

Display:

This is a link that only has an underline if you hover your mouse over it...

Be careful when removing the underline from your links. Sometimes, the removal of the underline may cause the link to be indistinguishable from normal text. There is a very small chance the common visitor will be able to notice that it is a link, if this is the case. So if you choose to remove the underline, be sure you do something else to the link to make it stand out.

A Couple Examples

Below are two examples that use many forms of CSS to manipulate the states of a hyperlink.

CSS Code:

a:link { 
color: white; 
background-color: black;
text-decoration: none;
border: 2px solid white; 

}
a:visited { 
color: white; 
background-color: black;
text-decoration: none;
border: 2px solid white; 

}
a:hover {
color: black; 
background-color: white;
text-decoration: none;
border: 2px solid black; 

} 

Display:

This link is a almost over-the-top

CSS Code:

a:link { 
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}

a:visited { 
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}

a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}

Display:

The Ugly Linkling