Langridge`s Image Replaceement Technique: A Final Look
Welcome to the final part of a 12-part series on image replacement techniques. By means of a strong hands-on approach, this series helps you start using these methods so you can add a fresh, appealing look to different text-based elements of your web pages, without having to sacrifice the cleanness of their structural markup.
Langridge`s Image Replaceement Technique: A Final Look - Using Langridge's technique with hyperlinks (Page 3 of 4 )
As I did with other replacement methods covered in previous parts of the series, I’d like to demonstrate how to use Langridge’s approach for improving the visual presentation of a group of <a> elements. In this case, I’ll be utilizing the same background image for styling the pertinent links:
With that PNG image available, the next logical step is coding the set of CSS styles that implement Langridge’s method, right? Well, here they are:
.fancy_link {
display: block;
width: 200px;
height: 0;
padding-top: 50px;
background: url(fancy_link.png) top left no-repeat;
overflow: hidden;
}
From this code sample, it’s clear to see how easy it is to use the aforementioned image replacement method with all of the web page elements that have been assigned the prior “fancy_link” CSS class. Since in this case, the elements that need to be styled are <a> selectors, it’s necessary to create a brand new XHTML document that includes some of them, at least for illustrative purposes.
That’s exactly what I’ll be doing in the last segment of this tutorial. Therefore, to learn more about how this styling process will be accomplished, go ahead and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
