CSS Links

Links can be styled in different ways.

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked


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 color 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:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background Color

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

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}


Sign-up for our email newsletter and get free job alerts, current affairs and GK updates regularly.
Subscribe Here (or)

Leave a Reply

Your email address will not be published. Required fields are marked *

9 + one =

Popup Dialog Box Powered By : XYZScripts.com
  • RSS
  • Facebook
  • Google+
  • Twitter