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.