css link color styles best practice

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.

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

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.)