Tutorial: Enhancing Images

A photo gallery is a perfect example of an eye-catching web page. This tutorial brings together a variety of image styling techniques. You'll format images with frames and captions, create a photo gallery that's flexible enough to look great in a variety of window sizes, and use background images to create professional-looking drop shadows.

To get started, you need to download the tutorial files located on this book's companion website at www.sawmac.com/css2e/. Click the tutorial link and download the files. All of the files are enclosed in a Zip archive, so you need to unzip them first. (There are detailed instructions on the website.) The files for this tutorial are in the 08 folder.

Framing an Image

Launch a web browser and open the file 08 → image_ex → image.html.
You'll be working on a basic web page from the fictional (just in case you thought it was real) website CosmoFarmer.com (Figure 8-10). In this case, there's already an external style sheet attached to the page, adding some basic text formatting.
Figure 8-10. Before and after—CSS, that is. If you rely just on HTML, images take up lots of space (left). With a little CSS (right) you can nicely frame an image and move it out of the way.
Open the file styles.css in the image_ex folder in your favorite text editor.
This file is the external style sheet used by the image.html file. You'll start by adding a class style to this stylesheet, then applying a class to the <img> tag in the HTML file.
Scroll to the bottom of the file and then type the following:
```
img.figure {

}
```
The selector img.figure targets any <img> tag with the figure class applied to it. You'll use this to selectively format only the images you want. (You could also just name the style .figure—the only difference is that that style would then apply to any tag with the class figure, not just images.)
Add float and margin properties to the style you just created, like so:
```
float: right;
margin-left: 10px;
margin-bottom: 10px;
```
The right float moves the image to the right side of the page, letting the text move up and wrap around the photo's left edge. The left and bottom margins give the photo a little breathing room and move it away from the text. Next, you'll add a border and some padding to make the image look more like a real snapshot.
Add border and padding, so that the finished style looks like this:
```
img.figure {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #666;
  padding: 10px;
}
```
If you save this file and then preview the web page right now, you won't see a change, since the class style has no effect until you've added the class to a tag.
Save and close the styles.css file and open the image.html file. Locate the <img> tag and add class="figure" so the tag looks like this:
```
<img src="../
images/grass.jpg" alt="Apartment Grass" width="200" height="200"
class="figure">
```
Now that image takes on all of the formatting properties you defined for the .figure class style.
Preview the page in a web browser. It should look like the right image in Figure 8-10.
You can find the completed version of this exercise, image.html in the 08_finished → image_ex folder.

A picture may be worth a thousand words, but sometimes you still need a few words to explain a picture. So in the next part of this tutorial, you'll add a caption below the photo.

Adding a Caption

You'll frequently want to add a caption to an image or photo to provide more information about the subject, where the photo was taken, and so on. Instead of just floating the image, as you did in the previous exercise, you want the caption text to float as well. The best way to float both is to wrap the image and the text in a container—a <div> tag—that's floated as a single unit. This method keeps the photo and its related text together. If you decide later that you want to change their layout—perhaps float them to the left—no problem: You simply change the formatting for the entire container.

In a text editor, open the file 08 → caption_ex → caption.html.
Begin by adding a little HTML to create the container.
Locate the <img> tag in the code, and add <div class="figure"> before that tag.
This marks the beginning of the container. Now close the <div> to indicate the end of the container.
Find the closing </p> tag of the paragraph directly after the image and type </div>. The code should now look like this:
```
<div class="figure">
<img src="../
images/grass.jpg" alt="Creeping Bentgrass"
width="200" height="200"/>
<p>Figure 1: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer.</p>
</div>
```
As with the previous tutorial, you'll edit an existing external style sheet (styles.css) that's linked to this web page.
Open the file 08 → caption_ex → styles.css.
Because this is an external style sheet, you'll notice there's no <style> tag. That tag is necessary only for internal style sheets.
Scroll to the bottom of the file and add the following style to the end:
```
.figure img {
  border: 1px solid #666;
  padding: 10px;
}
```
This descendent selector affects any <img> tag inside any other tag with the figure class applied to it—in this case, the <div> you just added. Since you're using a descendent selector here (and in step 7), you don't need to add a class to the <img> tag. As a result, you save a little typing, cut down on HTML code, and make the page load faster for your site's visitors.
Next, you'll format the <div> so that it floats the photo and caption text to the right edge of the page.
Add this style to the styles.css file:
```
.figure {
  float: right;
  width: 222px;
  margin: 15px 10px 5px 10px;
}
```
You've already used the float: right property in the previous tutorial, and the margin adds a little white space around all four edges of the <div>. But what's the width for, you ask? Although the photo has a set width (200 pixels; see step 3) the caption paragraph doesn't. When you don't set a width, the paragraph makes the <div> expand wider than the photo. In this case, you want the caption to be just as wide as the photo and its frame.
The 222 pixels comes from a little math used to calculate the entire area taken up by the photo on the page: While the photo is only 200 pixels wide, the 10 pixels of left and right padding as well as the image's 1-pixel left border and 1-pixel right border make the entire width of the photo equal to 222 pixels from border to border. Next, spruce up the look of the caption text.
Add the following style to the styles.css style sheet:
```
.figure p {
  font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
  color: #333;
  text-align: center;
}
```
This style uses some of the properties you learned about in Chapter 6 to create a center-aligned, bold, and gray caption using the Verdana font. Fortunately, the font shorthand property in the first line lets you roll four different properties into a single style declaration.
Again, you're taking advantage of a descendent selector (.figure p) to target just the caption paragraph. To make the caption stand out even more, add a background color and border.
Add three properties to the .figure p style, like so:
```
.figure p {
  font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  background-color: #e6f3ff;
  border: 1px dashed #666;
  padding: 5px;
}
```
The purpose of the background-color, border, and padding properties should be clear—to create a colored box around the caption. Now it's time to preview your work.
Save both the caption.html and styles.css files and preview the caption.html file in a web browser.
(Now you see one reason why it's easier to develop a design using an internal style sheet—you need to work in and save only one file instead of two.)
The page looks great: The photo and caption float to the right, and the caption stands out boldly. There's one small problem, though: If you look at the left and right edges of the paragraph, you'll notice they're indented slightly and aren't as wide as the photo. Here's an example of one of the many head-scratching situations you'll find as you work with CSS.
In this case, you've run into a problem with the cascade. The caption text is inside a <p> tag, and, as it happens, there's a tag style for the <p> tag in the styles.css file. When you look at that style, you see it sets margins—10 pixels on the top and bottom and 8 pixels on the left and right. You want to override those margins, and you can do so by adding new margins to a more specific style. (See "Specificity: Which Style Wins" on Specificity: Which Style Wins for a discussion of specificity and the cascade.) Fortunately, you already have a more specific style—.figure p—so you need only add margins to that style to override the margins from the more generic p style.

Add a margin property to the .figure p style, like so:

.figure p {
  font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  background-color: #e6f3ff;
  border: 1px dashed #666;
  padding: 5px;
  margin: 10px 0 0 0;
}

This removes margins on all sides of the caption except the top, which adds 10 pixels of space between the caption and the photo above.

Save the caption.html and styles.css files. Preview caption.html file in a web browser.
The page should now look like Figure 8-11 (You can find a completed version of this page in the 08_finished → caption_ex folder.)