Dorward's Ramblings

Removing the Underline From Hyperlinks

Published on

One of the most frequently asked questions is how to remove the underline from hyperlinks. It can be answered very simply, but there are a few different ways to apply it.

The Basics

To remove the underline from links you need to use a stylesheet. It would be a very good idea to get to grips with CSS before continuing with this guide.

To remove the underline apply text-decoration: none to the link (examples follow).

If you remove the underline from links you must provide some means for the user to identify the links. Changing the colour is a good start, but lots of people are colour blind, or using monochrome displays. A suitable method would be grouping links in an obvious menu.

<style type="text/css">

In this guide I mention adding style tags to the head section of a webpage several times. If you know CSS (and I would hope that you worked through the tutorials) then you will be able to put this code in an external file so it can be referenced from multiple pages thus saving maintenance efforts for the author and download time for the visitor.

Order

Pay careful attention to the order in which the different types of links are presented in the examples. The first 'C' in CSS stands for cascading, and if you define links in the wrong order you could accidentally override previous ones. For instance, should :visited be defined after :hover, then a user placing the mouse over a visited link would see the visited, not the hover, style.

Redefine Selector

This method effects all your links on your page. Add the following to the <head> section of your webpage.

<style type="text/css">
a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            blue;
  } 
a:visited {
  /* Applies to all visited links */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            #f0f;
  } 
a:hover   {
  /* Applies to links under the pointer */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: blue;
  color:            #fff;
  } 
a:active  {
  /* Applies to activated links */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: black;
  color: white;
  } 
</style>

Class Selector

This method allows you to select specific links on a page. Add the following to the <head> section of your webpage.

<style type="text/css">
a.mainNav:link    {
  /* Applies to unvisited links of class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            blue;
  } 
a.mainNav:visited {
  /* Applies to visited links of class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            #f0f;
  } 
a.mainNav:hover   {
  /* Applies to links under the pointer of class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: blue;
  color:            #fff;
  } 
a.mainNav:active  {
  /* Applies to activated links of class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: black;
  color: white;
  } 
</style>

Then to define the links:

<a href="/" class="mainNav">Homepage</a>

Descendant Selector

This is a less cumbersome methods to select a group of specific links on the page. Add the following to the <head> section of your webpage, replacing 'mainNav' with a class name that suitably describes your collection of links.

<style type="text/css">
.mainNav a:link    {
  /* Applies to unvisited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            blue;
  } 
.mainNav a:visited {
  /* Applies to visited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            #f0f;
  } 
.mainNav a:hover   {
  /* Applies to links under the pointer in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: blue;
  color:            #fff;
  } 
.mainNav a:active  {
  /* Applies to activated links in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: black;
  color: white;
  } 
</style>

Then set the class of a container that is an ancestor of the links:

<ul class="mainNav">
  <li><a href="/">Homepage</a></li>
  <li><a href="http://dorward.me.uk/">Away page</a></li>
</ul>

Inline style

This method removes the underline from a single link.

<a href="http://www.example.com/" style="text-decoration: none;">Example</a>

Note that inline style is not advised. It makes code less maintainable and uses extra bandwidth.