Looking for suggestions on how to style internal and external links.
External links will open a new page (or tab); and there are two types of internal links: a sub-menu type link; and one that opens a popup pane.
I've road-tested a couple of ideas and the users have found both a bit confusing: underlining all links, and giving different backgrounds to each type; and underlining just the external links and giving both internals the same background.
Also tried to delve into Wikipedia to find the origin of that little diagonal-arrow-thingy used on external links.
Are there any well-established conventions? Things you know work with viewers of varying savviness?
I'm not sure if there is a styling convention for links, but for what it's worth this is what I normally do for links within text unless there is a specific need to do otherwise.
All other page text is black by default.
All links' text lables are a darkish blue by default with no underlining.
On hover, the link text colour is changed to a darkish red with underlining.
You could follow the social media effort. Facebook for example has a page all external requests are funneled through telling the user they are about to go to an external site.
I'm always hesitant to change from blue and underlined, perhaps with the colours tweaked.
Normally attribute selectors are used for external links, either with a rel="external" in the link or something like [href^=http://] if you use http://something.com for all external links. However, if you then use pseudo-content classes to generate an image, that won't work in IE 7, so a background image would probably be best.
Great wit and madness are near allied, and fine a line their bounds divide.
a[href^="http://"] {
background: url(img/url.png) center right no-repeat;
padding-right: 24px;
It'll save you a lot of trouble adding all kinds of link styles (there are also variables for .zip, .pdf, etc.) and it's very clear to your site's visitors.
Reply With Quote
Originally Posted by ctoz
Bookmarks