Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Bringing Hyperlinks to Life with CSS

  • Print
  • + Share This
Eric A. Meyer shows you how to style both text and graphic hyperlinks using CSS. This includes using "link states" to create different link appearances based on their status, ways to handle graphics within links, and more. By the end of the article, you will have a working design that works in modern browsers and demonstrates the concepts discussed in the article.
From the author of

Hyperlinks are what make the Web a web at all. Without them, we'd be forced to manually type in the address of every page we wanted to visit. We probably spend more of our time on the Web searching out the right links and interacting with them than we do anything else. But hyperlinks can be much more than simple text or graphics with the borders removed.

In the course of this article, we'll explore ways to creatively style hyperlinks, see how to base their styles on various link states, and investigate the use of half-screen effects to make image links look better than ever.

Goals

As part of site design for a cutting-edge energy-supply company, we need to create a compact interface to convey information about the three main types of energy sources used by the client: natural gas, nuclear power, and solar power. The name for this interface is "Energy Informant," a name supplied by the client. The client also insists that some links should look different than a normal text link. "The help-system and press-release links need to really stand out compared to other links," the client said, and the boss agreed.

Preparation

You can download the files for this article from http://www.ericmeyeroncss.com. If you're planning to play along at home, load the file ch04proj.html into the editing program of your choice. This is the file you'll be editing, saving, and reloading as the project progresses.

  • + Share This
  • 🔖 Save To Your Account