CSS link styling
Changing the appearance of HTML links
CSS can be used to change the appearance of HTML links. It can be used to change the appearance of all the links or a subset of links on a page. This enables multiple styles of links on one page. CSS also enables the user to define styles for when the user puts their mouse over the link (hovering), when the link has been selected by the user (active) and for a link that has already been visited.
Basic links
To change the appearance of basic links we need to get CSS to apply a certain style to the A element.
<head>
<style type="text/css">
<!--
a, a:link
{
text-decoration: none;
color: #000000;
}
-->
</style>
…This code uses two styles a and a:link to get the links within the page and apply the style to them. This has been done by specifying the name of the HTML tag that the style wants to be applied to, as this will apply the style to all the elements of that type within the document. The style simply makes the text colour black and removes any decoration (e.g. underlines).
Mouse over ‘hovering’ links
A similar technique is used to change the appearance of a link that the user is currently hovering their mouse over.
a:hover
{
text-decoration: underline;
}Here the :hover pseudo-class has been used to enable the style, which simply adds an underline to the link.
Selected ‘active’ links
This style will be applied to links that have been selected, e.g. when the user has pressed the mouse but not released it. The following style makes the text colour change.
a:active
{
color: #FF6600;
}Visited links
Finally, we can change the links that a user has visited using the :visited pseudo-class.
a:visited
{
color: #339933;
}Full set of styles
The full set of styles shown below can be used to control the appearance of your links.
a, a:link
{
text-decoration: none;
color: #000000;
}
a:hover
{
text-decoration: underline;
}
a:active
{
color: #FF6600;
}
a:visited
{
color: #339933;
}Creating multiple styles for links
As well as controlling all the links on a page you can control a subset of the links using span tags. Span tags are presentation less elements so can be used to separate different sets of links.
<body>
<span id="links1">
<a href="myLink">My link 1</a>
<a href="myLink">My link 2</a>
</span>
<span id="links2">
<a href="myLink">My link 1</a>
<a href="myLink">My link 2</a>
</span>
…Note that the span tags have been given an id to differentiate it from any other section of the page, this will be used to apply the style to.
#links1 a, #links1 a:link
{
text-decoration: none;
color: #000000;
}
#links1 a:hover
{
text-decoration: underline;
}
#links1 a:active
{
color: #FF6600;
}
#links1 a:visited
{
color: #339933;
}Another style can be created in the same way for the second set of links to give them a different appearance from the first.