Styling Links using CSS Stylesheets

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

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

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

  • a:hover MUST come after a:link and
  • a:visiteda:active MUST come after a:hover

Adding Color to your links.

Web colours are distinguished by Hash Sques however simple colors can be used such as white, red, black etc in the example below we are using

a:link {color:#FF0000;} /* unvisited link - Red */
a:visited {color:#00FF00;} /* visited link - Green */
a:hover {color:#FF00FF;} /* mouse over link – Pink */
a:active {color:#0000FF;} /* selected link – Blue */

Text Decoration

The text-decoration property is mostly used to remove underlines from links: but there are other options such as “none, underline, overline, line-through, blink” The default option on your website is “underline” to remove the underline state simply add text-decoration:none; to your link attribute

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;}

Other Attributes you can use for your links are

font-size 10px, 12px, 14px etc
font-weight bold, normal
text-transform capitalize, uppercase, lowercase, none

 

  

The Dafault link is

Dafault Link

Example using all elements

Copy the Code below and past it into your Stylesheet, Please feel free to edit or delete any style or attribute that you do not require