Multiple Hyperlink Styles

In this tutorial I will explain what you need to know so that you can create multiple hyperlink behavior styles. Nothing fancy just some simple behaviors. I'll leave the fancy details up to you.

Before I get into the details, note that in order for your link styles to behave properly you need to have the CSS styling for your hyperlinks placed in the proper order.

1. link (Sets the initial appearance of a hyperlink)
2. visited (Sets the appearance of a link after that page has been visited)
3. hover (The appearance of the link as the mouse is moved over it)
4. focus (Hover appearance for those that use the tab button for navigation)
5. active (Appearance of the link after it has been clicked)

General styling for your hyperlinks

Having a general link style in your CSS is the first step to having multiple link style rules. In order to assign a particular style to all the links contained in a web page you would do something similar to the following in your style sheet.

a:link {
	text-decoration: underline;
	color: #000;
	background: transparent;
}
a:visited {
	text-decoration: underline; 
	color: #006; 
	background: transparent;
}
a:hover {
	text-decoration: none; 
	color: #fff; 
	background: #6196BC;
}
a:focus {
	text-decoration: none; 
	color: #fff; 
	background: #6196BC;
}
a:active {
	text-decoration: none; 
	color: #600; 
	background: transparent;
}					

The above is the best way to style the links that will be contained within your page content.

Assigning style rules

There are two ways to assign hyperlink styles that can be different from the hyperlink styles mentioned above.

1. Div specific
2. Link specific

Div specific hyperlink style rules

Creating the hyperlink styles and assigning them to a specific div will have all hyperlinks contained within this div follow the specified rules. Doesn't matter if the div is an (#)id or (.) class. For this tutorial I will use a div id named navigation.

The CSS for div id navigation

#navigation a:link {
	text-decoration: underline; 
	color: #006;
	background: transparent;
}
#navigation a:visited {
	text-decoration: none; 
	color: #006; 
	background: transparent;
}
#navigation a:hover {
	text-decoration: none; 
	color: #0080C0; 
	background: transparent;
}
#navigation a:focus {
	text-decoration: none; 
	color: #0080C0; 
	background: transparent;
}
#navigation a:active {
	text-decoration: none; 
	color: #0080C0; 
	background: transparent;
}
					
				

Specific hyperlink styles

OK, so now you want to have a specific styling assigned to a specific type of hyperlink. This can be accomplished by first creating the style rules in your CSS. It is best for this type of hyperlink styling to assign a class and not an id. Remember that an id can only be used once on a page and a class can be used as many times as needed.

The CSS for link class styleone

.styleone:link {
	text-decoration: underline; 
	color: #FFF; 
	background: #008;
}
.styleone:visited {
	text-decoration: none; 
	color: #FFF; 
	background: #06a;
}
.styleone:hover {
	text-decoration: none; 
	color: #FFF; 
	background: #000;
}
.styleone:focus {
	text-decoration: none; 
	color: #FFF; 
	background: #06b;
}
.styleone:active {
	text-decoration: underline; 
	color: #FFF; 
	background: #06F;
}
					
				

The html for a hyperlink with a class of styleone

        	
<a href="http://www.myhyperlink.html" class="styleone">LinkText</a>
					
				

The link above will use the style rule class of styleone even if it is placed inside a div that has div specific hyperlink style rules.

In summary you can have as many different hyperlink styles as you need. Just create a different set of style rules for each one.