Tag Archives: decoration

Styling your links

By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.

The different link states that we can apply styles to are:

  • a:link (an unvisited link)
  • a:visited (a visited link)
  • a:hover (when the mouse is hovering over a link)
  • a:active (while the mouse is clicking on a link

Take a look at the animated example below. We have links which are orange and with no underline. However, when the user moves their mouse over these links they change to a dark blue colour and are underlined.

styledlinks

Watch the video below and then scroll down to see the sample HTML & CSS code and some further notes.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling links</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet10.css" type="text/css"/>
</head>
<body>
<h1>Styling links</h1>
<p>By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.</p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

And here is the CSS code:

a:link{
 color:#FF8000;
 text-decoration:none;
}
 
a:visited{
 color:#FF8000;
 text-decoration:none;
}
 
a:hover{
 color:#B45F04;
 text-decoration:underline;
}
 
a:active{
 color:#DF3A01;
 text-decoration:underline;
}

Just a few rules to take note of:

  • There is an order when specifying the style for several links
  • When specifying the style for several links, a:hover must come AFTER a:link and a:visited
  • a:active must always come after a:hover