Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Images and Links 215

9

▼

You can use any of the border-related properties that were described in the previous les-
son to control the borders around an image, changing the width, color, or style. If you
don’t want any of the images on your page to have borders, whether they’re in links or
not, you can use the following style rule in your page’s style sheet:

img { border: none; }

Or, if you want to disable only borders on images that are inside links, you can use this
rule:

a img { border: none; }

You can always override that rule by adding a more specific rule that applies to the
images that should have a border. For example, let’s say you have some photos on your
page that are linked to individual pages but look better with a border. First, write your
image tag like this:

<img src="photo1.jpg" alt="Lake house"
class="photo">

Then add the following style rule:

img.photo { border: 2px solid black; }

Even if you disabled borders for images in general using one of the previous rules, that
rule will turn them back on for images with the photo class.

Including borders around images that are links has really fallen

out of favor with most web designers. Using them can make your

design look very dated.

TIP

Exercise 9.2: Using Navigation Icons

Now you can create a simple page that uses images as links. When you have a set of
related web pages, it’s usually helpful to create a consistent navigation scheme that is
used on all the pages.

This example shows you how to create a set of icons that are used to navigate through a
linear set of pages. You have three icons in GIF format: one for forward, one for back,
and a third to enable the visitors to jump to the top-level contents page. ▼