Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

Now you know how to add a really cool hidden link in CSS but what about if you want to make certain links stand out? Just as easy

First, when you add a link to your website we want to assign a class to it like so:

<a href=’http://www.thisismyurl.com’ class=’standout’>

In my case, I’ve labeled this link with the special tag standout which will let me affect the appearance. Next in the CSS, let’s add a special rule for it:

a.standout {
/* this is what we want the normal link to appear as */
text-decoration: none;
font-color: #990000; /* (assuming you want your link blood red */
font-weight: bolder;
}

a.standout:hover {
/* when people mouse over the link */
font-color: #000000; /* (assuming your default text is black) */
cursor: default;
text-decoration: underline;
}

In this example, I’ve made the link red but still taken the underline away. I’ve put the underline back when you mouse over the link which calls extra attention to it and shows the user there’s something interactive with the link.

How’s it work? Pretty simple really, any time your HTML calls an <a> tag with the class standout, the CSS will be loaded and in turn change the appearance of your site to accommodate the new new.