CSS Fun: Highlighting different types of links

 I am in the middle of reading the book CSS Mastery by Andy Budd. First off what a great book for everyone. I am by no means a designer but this book has helped out big time. Using CSS day to day is one thing but once you really start to understand why things happen (i always blame IE) then you are much better off. You may periodically see a CSS tip from me, most of which you can see on my site.

The first tip I am going to share with you is using how to highlight different types of links. This makes it easier for users to understand what they are clicking on. We will use this for external links and email links. The easiest way to do this is to add a class to any external links and then apply that class to all external links. The problem with that method is you have to go around to each link and add a class.  An easier way of doing that is using attribute selectors.

Attribute selectors allow you to target an element based on the existence or value of an attribute. This technique works by first targeting any links that start with the text http: using the [att^=val] selector. This will highlight all external but it will also pickup any internal links using absolute paths. To fix this we can reset any links that match our domain name. In the code below we are setting the background image for all external links, resetting links that are absolute internal and finally giving some style to mail links. Below the code is examples of each.

This is an external Link To Google
This is an absolute link to my about page
This is a link to email me

Categories: Books,Web Development

About The Author

My name is Dan Vega and I am a Software Developer based out of Cleveland OH. I love to play with new technologies and write about my experiences here. When I am not busy being a full time geek I love to lift heavy weights and hang out with friends and family. If you have any questions please don't hesitate to contact me.

Follow me on: