Managing Web Page Images with CSS

Adapted from The CSS Anthology: 101 Essential Tips, Tricks and Hacks
By Rachel Andrew

Dateline: January 28, 2004
Post comments in the Web Page Design forum

Given many of the designs favored by the CSS (Cascading Style Sheets) purists, you'd be forgiven for thinking that the image is soon to be a thing of the past, eschewed in favor of clean, standards-compliant, CSS-formatted, text-based design.

However, while sites that rely entirely on sliced-up images are beginning to look a little dated in comparison with the clean simplicity of the CSS layout "style," well-placed images can bring an otherwise commonplace design to life. And, as designers begin to push the boundaries of what can be achieved with standards-compliant semantic markup, sites that have managed to combine semantics and beauty are becoming much more commonplace.

Working with images in CSS requires a few simple skills, which can then be combined to create interesting effects. The solutions in this chapter extract demonstrate the basic concepts of working with images while answering some common questions. However, as with most of the solutions in The CSS Anthology: 101 Essential Tips, Tricks and Hacks, don't be afraid to experiment and see what unique effects you can create.

Solution

Adding a border to an image is a simple procedure using CSS. There are two images in the document displayed in Figure 3.1.

Figure 3.1. Images are displayed in a Web browser.

img {
border-width: 1px;
border-style: solid;
border-color: #000000;
}

This code could also be written as follows:

img {
border: 1px solid #000000;
}

In Figure 3.2, you can see the effect this has on the images.

Figure 3.2. The images look neater once the CSS border is applied.

Your layout probably contains images to which you don't really want to apply a permanent black border. You can create a CSS class for the border and apply it to selected images as required.

.imgborder {
border: 1px solid #000000;
}

< img src="myfish.jpg" alt="My Fish" class="imgborder" />

If you have a whole selection of images—such as a photograph album—on the page, you could set borders on all the images within a container.

Example 3.1. imageborders.css (excerpt)

#album img {
border: 1px solid #000000;
}

This approach will save you having to add the class to each individual image within the container.

img {
border: none;
}