Section 8.1. CSS and the img Tag

8.1. CSS and the <img> Tag

The venerable <img> tag has been the workhorse of photo-heavy Web sites 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's 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 (Section 7.3) to frame an image. You'll see an example of this in the tutorial in Section 8.6.1. Since each border side can be a different color , style, and width, you've got lots of creative options here.

• Padding . The padding property (Section 7.2) 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 (Section 7.4), 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, orif the image is contained in another layout element such as a sidebarthe image's containing element (Section 7.2.1). 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 in the tutorial in Section 8.6.3.

• Margins . To add space between an image and other page content, use the margin property (Section 7.2). 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's too broad a brush, since it formats all images on your pageeven 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 (Section 3.1) 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 .