css link color styles best practice

Question

There are many css-samples for styling color of links.

html5boilerplate.com offers such css code for link:

a { color: #00e; }
a:visited { color: #551         


        

Answer 1

If you want to be sure that you are styling links (and not the anchors which are not links), you should use a:link instead of a.

And you could add a:active at the end. Here you have a tutorial.

Answer 2

I always reset settings that might be different between browsers.

I also like to tag links to external websites differently, by adding an image (similar to the one in the wikipedia).

a,
a:link,
a:active,
a:visited,
a:hover {
    color:           #d30;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Links to external websites */
a.external:before {
    content:         url(./pics/external.png);
}

Answer 3

Never remove that outline, or at least remove it only for a:active. If you do it for all anchors then it will be also removed for a:focus which is used for keyboard navigation. Also relying on hover too much is very bad since hover is not present on touch screens.

I like to have all links easily distinguishable from the rest of the content. This is my personal preference:

2016 version

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: bolder;
    text-decoration: none;
}
a:visited { color: rgb(160,0,160); }
a:active { color: rgb(192,0,0); }
a:active, a:focus, a:hover { border-bottom-width: medium; }

2015 version

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(128,0,128); }
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom-width: medium; }

2014 version

a { border-bottom: 1px solid;
    color: rgb(0,0,166);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom: 3px solid; }

2013 version

a { color: rgb(0,0,166);
    font-weight: 700;
    border-bottom: 1px dotted;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:hover, a:focus, a:active { border-bottom: 2px solid; }
a:focus, a:active { color: rgb(166,0,0); }

Answer 4

i find its always good to add

a { outline: none; }

since some browsers add annoying outlines to links when you click them

Answer 5

That's definitely will suffice in vast majority of cases.

Just keep in mind that the correct order of styles for links is:

a:link           { color: #c00 }  /* unvisited links       */
a:visited        { color: #0c0 }  /* visited links         */
a:hover, a:focus { color: #00c }  /* user hovers, or focus */
a:active         { color: #ccc }  /* active links          */

The outline might look "ugly" for you, but that's a very important accessibility feature. If you remove that - please take care of providing an alternative way to properly distinguish the current element (bigger/bolder font, high contrast background etc.)