Styling Links – Making the Mundane Somewhat More Interesting


It’s been a while since I’ve done a CSS style post, so I figure its about time, and today I want to touch on something pretty simple, the <a> anchor tag.  Most anchors are pretty boring, some blue text that is simply underlined.  Some people go a bit beyond and make it change colours when you hover and such, and I’ll look at that, but I want to take this a step further.

The Boring Normal Anchor


Lets add a tool tip to our hyperlink



  • www.microsoft.com

  • To do this, we simply add a title attribute to the hyperlink tag

  • <a href=“http://www.microsoft.com” title=“This link will take you to the Microsoft web site”>www.microsoft.com</a>

Lets get rid of the underline, and make the color different



  • www.microsoft.com

  • To do this, we simply set the text decoration to none, and add a color to the tag

  • <a href=“http://www.microsoft.com”>www.microsoft.com</a>

  •     a
    {
    text-decoration: none;
    color: aquamarine;
    }

Instead of an underline, lets have a dashed line, or something else kind of fun



  • www.microsoft.com

  • To do this, we turned off the text-decoration, and added a border on the bottom that we set to be 1px dashed red, giving us the red dashed line

  • <a href=“http://www.microsoft.com”>www.microsoft.com</a>

  •     a
    {
    text-decoration: none;
    border-bottom: 1px dashed red;
    }

Lets add some kind of image to our link, indicating it’s an XML item.  You can alternatively use some other image indicating this is a link



  • www.microsoft.com

  • To do this, we add a background to the image, and add some padding on the right 

  • <a href=“http://www.microsoft.com”>www.microsoft.com</a>

  •     a
    {
    padding-right: 20px;
    background: url(http://www.nocommonground.com/blogSamples/link.jpg) no-repeat right;
    }

There are lots of other things you can do with links, such as defining partial styles for thinks like active, hover visited and non-visited links, but I’ll get into that later.  It’s a little bit more difficult to demo here because I can’t easily embed a CSS file in my blog, so I’ll have to prepare it separatly, and then just link to it from here.

Skip to main content