call us now!

08 9459 5730

0402 142 559

Cheap web design services in Perth! Your local web designer in Perth. Quality low cost web design that you can afford.

How to style HTML Links with CSS!

In my previous article about HTML links I explained about how to create internal and external links as well as email link. In this article, I am going to show you how to style HTML links with CSS; removing the default blue colour and underline, making the link in different colours and backgrounds etc...

By default, all HTML links are in blue colour and underline. You can remove this blue colour and underline so that your links look more professional. For example, you can make the text in different colours and backgrounds when you put your mouse over the link.

CSS Links
css links

There are four links states in CSS:

  1. a:link - a normal, unvisited link
  2. a:visited - a link the user has visited
  3. a:hover - a link when the user mouses over it
  4. a:active - a link the moment it is clicked

Example:

a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

Common Link Styles

In the example above the link changes colour depending on what state it is in. Lets go through some of the other common ways to style links:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example:

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

Background Colour

The background-color property specifies the background color for links:

Example:

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

Real Examples:

I am normal link with default colour and underline

I am coloured and no underline link - the link is now red and no underline.

Now if you put your mouse over the above two links, you will see the text in white colour in blue background and no underline. Below is my CSS:

#main_content #web-article a:hover
{
        color:#FFF;
        background:#06C;
        text-decoration:none;
}