Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

Classy Links.

9.14.2007

This is a pretty simple bit of code, but I though it might come in handy as it was something I hadn't covered yet. Here is one method of using CSS to apply a different appearance to some of your links using CSS.

<style type="text/css">
a.alternate { color: #FFFF99; }
a.alternate:visited { color: #CCCCFF }
a.alternate:hover { color: #6699FF; }
a.alternate:active { color: #990033; }
</style>

<a href="#" class="alternate">Alternately styled link</a>

This is a regular link. Only this middle link will have a non-standard style. This is another regular link.

The above method uses a class (the ".alternate" part) combined with the pseudo-class selectors (the ":hover" part) that are used in links. Alternately, you could group the links inside an element with an id or a class, and select them as shown in the following code.

<style type="text/css">
#nav a { color: #FFFF99; }
#nav a:visited { color: #CCCCFF }
#nav a:hover { color: #6699FF; }
#nav a:active { color: #990033; }
</style>

<div id="nav">
<a href="#">Alternately styled link</a>
<a href="#">Alternately styled link</a>
<a href="#">Alternately styled link</a>
</div>

Once you've selected your links, you can add any style declarations that you wish. I've specified only the foreground color (the text color of the link) here for simplicity.

Just remember to use specify your link declarations in the following order:

This order will ensure that the cascading styles for links are displayed as as you expect them to.

Permalink

Tags: code css

Authorized users may log-in to leave a comment.

Last Blog: Screen Reading.

Next Blog: Genius or Disaster?