Css templates | CssTemplatesWeb

You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.

It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.

This is how you can style a link to an external site, using css:

a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.

And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:

a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.