No matter how much you gussy up your text or fiddle with borders and margins, nothing affects the appearance of your site more than the images you add to it. And once again, CSS gives you more image control than HTML ever dreamed of. You can work with graphics in CSS on two fronts: the <img> tag and the background-image property (which lets you place an image in the background of any tag on a page).
This chapter delves into some of the creative ways you can deploy images with CSS. The best way to learn how to use graphics in CSS is to see them in action, so this chapter has three—count 'em, three—tutorials. By creating a photo gallery web page and using images for overall page styling, you'll be an image-slinging pro in no time.
The venerable <img> tag has been the workhorse of photo-heavy websites since the beginning of the World Wide Web. Even sites without photos use it to add logos, navigation buttons, and illustrations. While CSS doesn't have any properties specifically aimed at formatting images, you can take advantage of the CSS properties you've already learned to enhance your site's graphics. For example, the border property is a quick and simple way to frame an image or unify the look of a gallery of photos. Here's a rundown of the CSS properties most commonly used with images:
Borders. Use one of the many border properties (Adding Borders) to frame an image. You'll see an example of this in the tutorial on Tutorial: Creating a Photo Gallery. Since each border side can be a different color, style, and width, you've got lots of creative options.
Padding. The padding property (Control Space with Margins and Padding) adds space between a border and an image. By putting a little breathing room between a photo and its frame, padding simulates the fiberboard mat that's used in traditional picture frames to surround and offset the image. And by setting a background color, you can even change the color of the "mat."
Float. Floating an image moves it to either the left or right edge of the page, or—if the image is contained in another layout element such as a sidebar—to the left or right edge of the image's containing element. Text and other page elements then wrap around the image. You can even float multiple images to create a flexible, multi-row image gallery. You'll see an example of this technique in the tutorial on Tutorial: Creating a Photo Gallery.
Margins. To add space between an image and other page content, use the margin property. When you float an image, the text that wraps around it is usually uncomfortably close to the image. Adding a left margin (for right-floated images) or right margin (for left-floated images) adds space between text and the graphic.
In most cases, you won't create a style for the <img> tag itself. Formatting this tag is using too broad a brush, since it formats all images on your page—even those with very different functions, such as the logo, navigation buttons, photos, and even graphic ads. You wouldn't, after all, want the same black frame around all of those images. Instead, you should use a class style, such as .galleryImage or .logo, to apply the style selectively.
Another approach is to use a descendent selector to target images grouped together in one section of a page. If you have a gallery of photos, you can place all of the photos inside a <div> tag with an ID name of gallery, and then create a style for just the images inside that <div>, like this: #gallery img.