Hands On Practice 4.4 Exercise

Click Here to View Exercise


Chapter 4

Visual Elements and Graphics

Hands On Practice 4.4 P.136

In this exercise I learned how to better apply hyperlinks to images by using CSS.

In the previous exercise I learned how to place a border comment within an image tag. If you will remember the default setting for an image with a hyperlink is a blue border that surrounds an image. The code I used last time was built into each individual image tag. See code below.

<h1><a href="index.html"><img src="trilliumbanner.jpg" alt="Trillium Media Design" border="0" width="700" height="86" /></a></h1>

We can now apply this setting in CSS by using the following code.

img {border: 0}

This makes things easier when trying to update a web page. You no longer have to apply that border setting to every single image.

The book gives you three different images for you try out. I applied these changes to the home, services, and contact links. Now instead of these links being text, they are now images. It also suggests adding or repeating the links in text to the bottom of the page in case a computer shuts off the images. It also suggests making these links smaller by changing the settings in the nav class in your CSS.