CSS Web Design

What’s the difference between styling links using just “a” vs. styling links with “a:link”?

Example 1:
a {color: red;}

Example 2:
a:link {color: red;}

As would be expected if you use “a”, all of your links both visited, unvisited, hover and active will be the same style (red in the above example) unless you also specifically set different styles for visited, etc. links.

If you instead use “a:link” then only unvisited links will take on the styles you have set. Visited links will remain the browser’s default style unless you add another style for “a:visited”. (The same goes for hover and active links).

Normally if you set a style for non-visited links you would want to set a different style for visited links. In that case it doesn’t seem to much matter whether you use “a” or “a:link” to style your links since setting another style for visited links using “a:visited” would work the same. (a:visited is more specific so would override styles set for “a”.)

So is there a reason to use one vs. the other? Well, if for some reason you want all your links to be the same style style whether visited or unvisited then using “a” is the logical choice since it requires the least code. Let’s assume you want different types of links to be different styles however.

For styling your default links it doesn’t really matter which you use. Let’s say though that you want your deafault links in your main text to have different styles for visited, unvisited, hover and active but you want all the links in a special section such as the navigation menu to be the same style regardless. In that case there are some differences between using “a” vs. “a:link” depending on which browser you use.

In Firefox and presumedly other Mozilla-base browsers you only need to use .menu a {color: green;} to overide all the different default link styles you’ve set:

Example 3:
a:link {color: red;}
a:visited {color: black;}
a:hover {color: blue}
.menu a {color: green;}

It doesn’t matter whether you use “a” or “a:link” for your default link style. Your special links must be selected using a class name rather than a generic HTML tag such as h1 however. This works in Internet Explorer with one difference, the special links must be within a container with an ID rather than a class name.