Links, like just about any other part of a web page, can also be made to look different with some CSS code.  Using a CSS, you can easily change the color of  link, the size, the background and much more.

Before we get started though, there are four different link states that you may want modify.  They are:

• a:link – just your run-of-the-mill regular link
• a:visited – a link that somebody has visited
• a:hover – the effect to the link when somebody mouses over it
• a:active – how a link looks the moment it is clicked

Now that you know the four different link states, how can you modify them?

When adding CSS code to modify the way your links look in a page, you can use just about any CSS property out there. Here are some common link styles you may want to play with.

Take Away the Underline for Links with CSS

If you want to take away the underline from links, try setting the text-decoration CSS property to “none”.

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

Change the Colors of Links with CSS

Another quick and easy styling tip would be to change the background color or the color of the links themselves.  You can do that by using the “color” and “background-color” link properties.  Here is an example:

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

Using More Than One Link Style on the Same Page

As an example, let us say you want the box on the left to have blue links, and the box on the right to have red links, all on the same web page.  You can do that by using context dependent selectors.  The thing to remember is to put the section’s id, class, or span name before the link code like so:

.box1 a:link {color:#336699;}

.box2 a:link {color:#335544;}

I hope that serves a a good introduction into the basics of styling links using cascading style sheet code.  This will help you make your links on your web sites more unique to the look and feel that you want your own web site to have.

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