Class up your link icons with CSS background images

It sounds like there will be a “web 3.0” and that “web 2.0” will become obsolete once we get bored of it. There’s a lot of new ideas on this old Internet, and they will keep coming as we continue to collaborate and refine the process in which we disseminate our data.

Innovation: Separate style from content

One brilliant revelation in coding for the web in recent years has been the separation of style from content. Gone are the days of using tags for presentation, now we utilize CSS to create styles that are easily swappable and flexible enough for our plastic Internet. Today I am going to show you a simple and attractive way to add flair to important links, while preserving the ideal of separating style from content.

Giving your pdf icons class

In our previous iteration of the Portent home page, we had pdf icons next to the links on the library archives, so that people knew that they could download pdf versions. These were made up of individual images placed next to the text link. Here is what the code looks like.

<a href="library/videopr.pdf">PDF Format  <img src="https://www.portent.com/images/pdf-icon.gif" alt="PDF Format" height="11" width="10" /></a>

So what’s the problem with that?

1. Separation of style from content. We are not trying to display an image of the pdf icon as our primary goal here. The goal is to help the end user recognize that this link is a pdf link. An image placed next to the link has no semantic meaning. We can definitely streamline the process and remove this presentational element from our code.
2. Scalability. What if, down the line, Adobe completely changes the pdf icon (a perfectly reasonable assumption!) and we want to change it on our page as well? What if we decide we don’t want to show icons at all? With the old method we would have to go and change every single little bit of code, or overwrite the old image. What if the old image is a different size than the new one? Then you’d have to go to each individual image tag and update the height and width. A huge pain.
3. Accessibility. What happens if the image doesn’t load? The alt text “pdf format” appears next to the text that says “pdf format”. How confusing is that to someone, say, with a screen reader?

The solution

Create a CSS class for the pdf links. That way, if we ever want to make a link to a pdf anywhere else on the webpage, we don’t have to remember what folder we put the pdf image in or what code to use, we can just add class="pdf" to the anchor tag. Here’s how to do it.
First, create your class in your stylesheet. Then, add the image you want to use as a background image. I am using CSS shorthand here for streamlining purposes.

.pdf {
background:url(images/pdf-icon.gif) center right no-repeat;
}

Getting there! We need to add some padding to display this thing correctly, and a bit of code to keep it from wrapping improperly.

.pdf {
background:url(images/pdf-icon.gif) center right no-repeat;
padding:0 16px 0 0;
white-space:nowrap;
}

Now, with those few lines of code, we have an elegant style that we can use for our entire website whenever we want to denote a pdf link. Just update your links with class="pdf" and you are good to go. We even got rid of that gross underline under the image. I call that a success.

Read more

• Microformats
• Designing for Context – A List Apart

Chris Furniss is a designer, HTML producer and social media guru at Portent Interactive since 2006. In his free time, he runs a podcast and blog of his own called The Weekly Geek.