HTML Link Appearance

Test Page

This page attempts to show some of the link selection techniques possible in HTML with style sheets. It also provides a brief discussion of some usability issues.

Plain Text Link

This is the way a text link appears without any special handling.

This page.

The HTML used is equivalent to

<a href="…">This page</a>

with no special handling in the style sheet.

Links of this sort are found all over the web. Users will be familiar with them. They are appropriate for use in text, where a user will want to jump to some related information.

Plain Image Link

This is the way an image link appears without any special handling.


The HTML used is equivalent to

<a href="…"><img src="…"/></a>

with no special handling in the style sheet.

Links of this sort are also found all over the web. Users will be familiar with them. They are a little less obvious than text links, though, as the image changes appearance very little when enclosed in a link tag. Thus, these are best when accompanied by a text link, or when the user is explicitly told that the image is a hyperlink.

If this sort of link is used to present textual information, there may be difficulties for visually impaired users. Some users are unable to read text at the more usual sizes and colors, and will set their browsers to use fonts and colors they can read. The text link styles will be automatically converted to the user-selected fonts, and the user may be able to override the standard colors as well. Image links will not change appearance to accomodate visually impaired users.

Text Link with Mouse-Over Highlight

This is the way links show up with a text or background color (or both) chosen by the stylesheet.

This page or this page.

The HTML used is equivalent to

<a href="…">This page</a>

with the style sheet specifying something like this:

a:link {
    color : #00a ;
    background-color : white ;
}
a:visited {
    color : #009 ;
    background-color : white ;
}
a:hover {
    color : #000 ;
    background-color : #9cf ;
}

This appearance allows links that can appear as ordinary link text or as normal (non-link) text, but show themselves when the mouse moves over them. If they appear to be links (underlined, or the browser default link appearance), then they are a pleasant addition to usability: the user can easily tell when the cursor has entered the selection area.

As normal (non-link) text, they are too easy to overlook, and should not be used (except in, say, a puzzle). This link appearance is best used on obvious navigation items, such as a page-top navigation bar, or a side menu.

Text Link with Button Styling

This is the way links show up with a stylesheet-driven button appearance.

This page

The HTML used is equivalent to

<a href="…" class="button">This page</a>

with the style sheet specifying something like this:

a.button {
    line-height: 180%;
    padding: 2px;
    border : gray outset 2px ;
    text-decoration: none;     /* no underline */
}
a.button:link {
    color : #00a ;
    background-color : white ;
}
a.button:visited {
    color : #009 ;
    background-color : white ;
}
a.button:active {
    border : gray inset 2px ;
}
a.button:hover {
    color : #000 ;
    background-color : #ccc ;
}

This link appears as a square button. Unfortunately, square is the only shape that is supported for the border attribute that is used here. This appearance is best used where the user expects to see a button that takes the user to another page.

Other border attributes give different appearance. For completeness, here's the other border attributes:

border attribute sample CSS appearance comments
outset
a.button {
    border : gray outset 2px ;
    text-decoration: none;
}
Return consider an inset border for the active link style.
inset
a.button {
    border : gray inset 2px ;
    text-decoration: none;
}
Return consider an outset border for the active link style.
ridge
a.button {
    border : gray ridge 4px ;
    text-decoration: none;
}
Return consider a groove border for the active link style.
groove
a.button {
    border : gray groove 4px ;
    text-decoration: none;
}
Return consider a ridge border for the active link style.
dotted
a.button {
    border : gray dotted 2px ;
    text-decoration: none;
}
Return  
dashed
a.button {
    border : gray dashed 2px ;
    text-decoration: none;
}
Return  
solid
a.button {
    border : gray solid 2px ;
    text-decoration: none;
}
Return  
double
a.button {
    border : gray double 6px ;
    text-decoration: none;
}
Return each border line, and the gap between, is one-third of the border width. This means that the border can look like a solid border if it's too thin.
hidden
a.button {
    border : gray hidden 2px ;
    text-decoration: none;
}
Return Why bother? This value only affect border conflict resolution in tables.

Note that this example uses the class attribute. If all links are to be buttons, then a class is not needed (although perfectly acceptable). If only some links will be buttons, then the class is needed to distinguish between them.

Image Link with CSS Mouse-Over Highlight

An image can have a transparency. In this case, the transparency shows the background color of the element. If the stylesheet has a mouse-over background color change, then the image will appear to change color.


The HTML used is equivalent to

<a href="…"><img class="high" src="…"></a>

with the style sheet specifying something like this:

a img {
    background-color: inherit;
}
a:link {
    color : #00a ;
    background-color : #999 ;
}
a:visited {
    color : #009 ;
    background-color : #999 ;
}
a:hover {
    color : #000 ;
    background-color : #ccc ;
}

This appearance is quite flexible. Links of nearly any appearance can be created. Because the link changes color when the mouse moves over it, it is fairly simple for the user to find the link.