Tag Archives: CSS

CSS 101: Changing link appearance

[Had a few people ask me about this. Easier to write it down....]

By default, links in HTML:

  • are underlined
  • are in the same font as the rest of the document
  • change colour depending on whether the link target has been visited or is yet to be visited in the current browser session.

Note this the last rule “link has been visited” is slightly different to the expected “link has been clicked”. Your links can therefore change their appearance to indicate a visit without ever being clicked. For example if you have two links to the same page, both will change colour when you click one of them and visit the target page.

To change any of these defaults you simply need to define an alternate style for the links.

A word of warning before we start

Be careful when updating the default styles for your links. Users are used to the defaults given above.

If you change them too dramatically some users may not be able to identify your links and not access your content. If changing the styles, ensure you provide some other method to identify the links as links. For example, position in an obvious-looking menu, use different colours/fonts, add an icon or image, use standard wording, etc.

Styling links based on their status

A link is added using the <A> tag. However adding a style for this tag is slightly complicated because the link has four different statuses, called pseudo-classes, and styles can be set for each:

  • A:link – link that has not been used, and the mouse is not pointing at it
  • A:visited – link that has been used, and the mouse is not pointing at it
  • A:hover – link that has the mouse pointing at it (but not clicking it)
  • A:active – link (visited or not) that has the mouse clicking on it

There are some rules about the order to define the pseudo-classes:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

An example

For example, assume you want to remove the underline style for the link, but show the underline when the mouse hovers over it. Additionally you do not want visited links to show a different colour to unvisited links. A sample style definition would be:

A:link, A:visited {
        color: #0066ff;
        text-decoration: none;
}

A:hover, A:active {
        color: #0066ff;
        text-decoration: underline;
}

Note how the different pseudo-classes for the link tag are identified by “:name”. Eg A:hover defines the style for the hover status of the link, etc. Also note how the same definition can be used for multiple statuses simply by separating the names by commas.

Obviously you can do anything you want on those styles. For CSS text-decoration is the attribute that determines underlined or not.

using these styles in your page

To make use of these styles on your page you need to include your new style definition:

  • in the <HEAD> section (add a <STYLE> section within the head), or
  • as a separate, linked CSS file

To add the above definitions in the document, add a <STYLE> section in the document head. For example:

<head>
        <style>
        A:link, A:visited {
                color: #0066ff;
                text-decoration: none;
        }
        A:hover, A:active {
                color: #0066ff;
                text-decoration: underline;
        }
        </style>
</head>

To link as a separate stylesheet, save the style settings in a text file (don’t include the <style></style> tags) and then add the link to that file in the document head. For example:

<head>
        <link href="styles/main.css" type="text/css" rel="stylesheet" />
</head>

If you want to add comments/descriptions in your stylesheet file (you know you ought to!) use /* … */ to indicate those comments.

Styling based on location on the page

Only other point of interest is that you can also set styles for your links depending on where they appear in your HTML. For example we often use links in table headings to allow sorting (click on heading to set order, etc). Since headings have a different default style, we need different link styles just for headings:

TH A:link, TH A:visited {
         color: #ffffff;
         text-decoration: none;
}

TH A:hover, TH A:active {
         color: #ffffff;
         text-decoration: underline;
}

Notice how this CSS just refers to links within the tag to allow me to finetune their appearance.

more information

Once you know the pseudo-classes for manipulating link appearance, you are obviously free to make any changes supported by CSS. All these pseudo-classes are part of CSS1 – the full CSS1 specification is on the W3C website.

A useful primer on using CSS and styles is provided by W3Schoools.