Bringing Hyperlinks to Life
Project 4
Project files
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 Project 4, the reader will explore ways to creatively style hyperlinks and see how to base their styles on various link states. This includes working with both graphic and text links, and explores ways to use CSS to make links behave in some surprising and useful ways.
Related Resources
You can read an excerpt from this project in the Bonus Materials section of the Web site.
You can also read the full main text of the project, minus sidebar notes and asides, as the article "Bringing Hyperlinks to Life with CSS" on InformIT (free registration required).
Errata
- Page 81
-
The first code block on the page should read:
<table cellspacing="0" id="inform"> <tr> <td id="navbuttons"> <a href="sun.html"><img src="sun.gif" id="sun"></a> <a href="gas.html"><img src="gas.gif" id="gas"></a> <a href="atom.html"><img src="atom.gif" id="atom"></a> </td> <td id="main">
- Page 87
-
In the first code block on the page, the first rule should read:
td#navbuttons a:active img {border-color: #FC0; border-style: inset;}