How to Style Links

[euanmead]

From Colourful Code

Links allow users to travel between web pages. Without them the web would be useless. I quote web standards when I say “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages”. Links stop users from getting lost. We click on them on the page when we want to progress to somewhere else.

User don’t read…

…they skim through the content, therefore links should be made obvious. They should also give a indication of where the user could expect to go.

CSS selectors and pseudo-classes:

a:link { }
Unvisited link.

a:visited { }
Visited links.

a:hover { }
The user’s mouse is over a link.

a:active { }
The user has clicked a link, and not released.

Quick Tip: The pseudo classes have to be in that order.

The default settings are

a:link {color:#00E;}
a:visited {color:#551A8B;}
a:hover {text-decoration:underline;}
a:active {color:#E00;}

So why do you want to know the default settings?

You should base your styling on them. Or at least one major setting. The link pseudo color is automatically recognized by computer users, a day old baby and your pet gerbil as dark blue. Personally, like most people, I think the default color is to strong, needs toning down. Colors I like include: #66CCCC, #8DEEEE , #7AC5CD, #39B7CD.

What should stay fixed when I style it?

Well the font. It disturbs me when I hover or click a link and all the text jumps. Also margins and padding, changes in these these will also create jumps.

I’m a cool kid, what other ways are there?

Rounded padded links. I use these here on Colourful Code where they create an obvious link and look rather stylish. A down sound is the hack for images and they only work on newish browsers.

Code:

a {
color:white;
padding:2px 4px;
background-color:#86FF6A;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
a:hover {
background:#F62444;
}
a:hover{background:#F62444}

I have also seem people putting symbols to define visited links. Personally I think this depends on the site, but it can be great.

Code:

a:visited {
padding-left: 10px; /*Should be background image width plus normal non-visited (a:link) padding*/
background: url(symbol.png) left no-repeat #333;
}

a:visited:hover {
padding-left: 10px; /*Should be background image width plus normal non-visited (a:link) padding*/
background: url(symbol.png) left no-repeat #000;
}

[Author]

Posts