A problem many web designers run into is as their site grows beyond the 50 page mark, it becomes very difficult to introduce new site wide styles. As most of us know it is best to spend as much time planning your site as it is designing and developing it. A step that many designers miss during the planning stage is the styling of specific links.
The Forgotten Links:
- External links
- PDF links
- Email links (mailto)
- Anchored links
- Popup links (target="_blank"
- etc.
By adding specific styles to these types of links you can add a second layer of usability to your website. When a user sees a PDF icon next to a link they will automatically know that what they are about to click is a PDF. The same can be said for external website links and email links. Many novice CSS designers will solve this problem using classes, i.e <a href="http://..." class="external">My Link</a>. While this would work early on in site development many of us in the real world inherited a really poorly developed site and need to use other methods to style links site wide.
Styling External Links With CSS:
By using CSS3 selectors we can select all <a> tags that begin with "http" giving them a background-image and padding-right to accommodate that image:
a[href^="http"] {
padding-right: 15px;
background: url(external-image.png) no-repeat center right;
}
Styling Email Links With CSS:
The same can be done with email links. Here we style all <a> tags that begin with "mailto:" and apply our email background-image.
a[href^="mailto:"] {
padding-right: 15px;
background: url(email.png) no-repeat center right;
}
Styling PDF Links With CSS:
Finally PDF links can be styled by styling all <a> tags that end with ".pdf" and apply a pdf icon to them.
a[href$=".pdf"] {
padding-right: 15px;
background: url(pdf.png) no-repeat center right;
}
Putting it all together:
a[href^="http"] {
padding-right: 15px;
background: url(external-image.png) no-repeat center right;
}
a[href^="mailto:"] {
padding-right: 15px;
background: url(email.png) no-repeat center right;
}
a[href$=".pdf"] {
padding-right: 15px;
background: url(pdf.png) no-repeat center right;
}
Notes:
This will not work in IE6 but because IE6 does not support the CSS3 selectors. It will show the links as normal without the background-image and without the padding. This works out perfectly as users with more modern browsers such as IE7 and Firefox will reap the rewards of your ingenious CSS coding.