Dreamweaver CS6: The Missing Manual

Controlling Images with CSS

Cascading Style Sheets aren’t just for stylizing text. You can also use its design power to add borders to an image, force text to wrap around an image, and even add images to the background of other elements. For example, the CSS background-image property lets you place an image in the background of a web page, or add a graphical background to a link, headline, or any HTML tag.

In general, you probably don’t want to create a tag style (see Types of Styles) for the <img> tag. That type of style affects every image on a page (or on an entire site if you use a site-wide external style sheet). And while you may want a bright-red, 10-pixel border around each thumbnail in a photo gallery, you probably don’t want that border around the site’s logo or the navigation buttons on the same page. You’re more likely to create class styles that you manually apply to certain graphics. In the thumbnail example, you’d create a class style with the proper border setting, and then apply that class to each gallery image (you can be even more efficient and use a descendent selector as described on Descendent Selectors).

Wrapping Text Around an Image

When you add an image to a page, you might initially find yourself staring at a bunch of empty white space around the image (see Figure 5-10, top). Not only does this waste precious screen real estate, it’s usually unattractive. Fortunately, you can wrap text around images using the CSS float property (see Figure 5-10, bottom).