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.

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.)

In a text editor, open the gallery.html file you completed in the previous exercise.

First, add a background image to the <div> tag that surrounds each image.

Add this style to the gallery page’s internal style sheet:

.photo {
  background: url(drop_shadow.gif) right bottom no-repeat;
}

This .photo style adds a background image—drop_shadow.gif—to the lower-right corner of the photo <div>. The no-repeat value means the graphic won’t tile.

If you preview the page now, you won’t see much. That’s because the drop shadow appears in the background. On top is the photo itself, which you styled in step 3 on Tutorial: Creating a Photo Gallery to have a white background, a black border, and 4 pixels of padding. What you need is a way to reveal that background image.

One clever technique pioneered by Richard Rutter (www.clagnut.com) is to move the image up and to the left a little—essentially moving it outside of its containing <div> tag. CSS provides a mechanism known as positioning that lets you control the exact placement of an element. You’ll learn more about positioning in Chapter 13, but for now you need to add only three properties to the .photo img style you created in step 3 on Tutorial: Creating a Photo Gallery to reveal the drop shadow.

Locate the .photo img style, and add three positioning properties, like so:

.photo img {
  border: 1px solid #666;
  background-color: #FFF;
  padding: 4px;
  position: relative;
  top: -5px;
  left:-5px;
}

In a nutshell, these three properties simply move the photo up and to the left 5 pixels, exposing the underlying drop shadow graphic of the <div>. In fact, the very reason for using the <div> to contain the photo here is to provide an element to hold the drop shadow image.

Save the file and preview the page. It should look like Figure 8-13.

Each image has its own drop-shadow, and you didn’t even have to open Photoshop!

In your text editor, open the file 08 → bg_ex → bg_images.html.

This page is a basic two-column layout: a very simple page, with some text formatted on a white background (Figure 8-14, top). To start, you’ll add a background image to the page. The page has an external style sheet with the basic formatting, but so you don’t have to wade through all the styles in that file, you’ll add an internal style sheet for the steps in this tutorial.

Click between the opening and closing <style> tags. Add the following style:

body {
  background-image: url(images/bg_page.png);
  background-repeat: repeat-x;
  background-color: #FFF;
}

The first line of code points to the image—bg_page.png—you want to display on the page. The file is stored in the images folder. This graphic is a gradient that starts as light blue at the top and fades to white at the bottom. The graphic isn’t as tall as the page content, so without further instructions, it would tile over and over across and down the page. At a certain point down the page, that light blue would reappear and fade once again downward to white. To prevent this unsightly snafu, you’ve set the background-repeat property so that the image tiles from left to right in order to fit any width of browser window, but doesn’t tile down the page. The last line of code sets the page’s background color to match the end of the gradient, so the image fades seamlessly into the page’s background color.

Save the file and preview it in a web browser.

The background graphic’s blue gradient drips down the page. Not bad looking, but the blue also appears in the text’s background. You can make the text pop by giving its background a different color.

Return to your text editor and the bg_images.html file. Add another style for the <div> containing the content of the page:

#wrapper {
  background-color: #FFF;
}

Figure 8-14. Using background images, you can make an already well-organized page (top) look much spiffier (bottom). Since you can add images to the background of any tag on a page, the possible placement of graphics on a page are nearly limitless.

The wrapper div is a fixed width, centered in the middle of the page, containing all of the page’s text. This style gives it a white background, but with the help of an image, you can do better than that.

Edit the style you created in step 4 by adding a background image:

#wrapper {
  background-color: #FFF;
  background-image: url(images/bg_main.jpg);
  background-position: left top;
  background-repeat: no-repeat;
}

These three lines of code add a background image to the top left of the <div>; the no-repeat option for the background-repeat property means the image only appears a single time. If you save the file and preview it in a web browser, you’ll now see the picture of a hand acting like it’s holding the page. Very cool. The only problem is the text is too far up, covering up the image. You’ll next push down the big, top headline and the left sidebar.

Add two more styles to the internal style sheet:

#banner {
 margin-top: 48px;
}
#announcement {
 margin-top: 115px;
}

The first line just adds a bit of padding, pushing down the banner containing the headline until it just touches the top of the white page, while the second style moves the left sidebar down enough to clear the picture of the hand. The page should now look like Figure 8-15.

Return to your text editor and the bg_images.html file. Add a style for the <h2> tags inside the main <div> tag:

#main h2 {
  background-image: url(images/underline.png);
  background-repeat: no-repeat;
}

The background-image property specifies which graphic to use in the background of <h2> tags inside an tag with an ID of main; while the no-repeat value makes sure graphic only appears a single time.

Figure 8-15. CSS lets you combine a background color and a background image, which comes in really handy in this example. The main text area has a white background color that helps separate the text from the fading gradation in the page’s background. In addition, a graphic of a hand holding a piece of paper adds depth to the design.

If you preview the file now, you’ll see that the underline doesn’t exactly line up. In fact, it isn’t under at all. It’s above the headlines!

Add the following style declaration to the #main h2 style below the background-repeat property:

background-position: left bottom;

You’ve changed the graphic’s starting location so it appears at the left edge and bottom of the <h2> tags. If you preview the page now, though, you may not notice much improvement. The underline runs into the headline text.

But there’s an easy fix. Since the bottom value used here puts the graphic at the bottom of the block created by the <h2> tag, you need only to increase the overall height of the block to move the line down a bit. You’ll do this with a little bottom padding.

Edit the #main h2 style one last time, so that it looks like this:

#main h2 {
  background-image: url(images/underline.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 7px;
}

Padding, as you’ll recall from page 153, is the space between the border (the edge of the background as well) and the content. It also increases the overall height of the box—in this case by adding 7 pixels of bottom padding. Now, the line graphic is placed at the bottom of the h2 block, but in the empty space created by the bottom padding.

Save the file and preview the page in a web browser.

Each <h2> tag has the hand-drawn underline. Next you’ll tackle the sidebar box, making it look a little less boxy and jazzing up the bulleted lists.

Return to your text editor and the images.html page. And add a style for formatting the list items in the left sidebar.

#announcement li {
  list-style: none;
}

The bulleted list is inside a <div> with an ID of announcement, so this descendent selector targets just the list items (<li> tags) inside that div. The style removes the bullet. Now add the graphic.

Add the following two properties to the #announcement li style:

background-image: url(images/bullet.png);
background-repeat: no-repeat;

You’ve seen these two properties before. They add an image to the background and turn off repeating so that the graphic appears only once.

If you preview the page, you’ll see that the bullets currently overlap the list text and the list items are a little jammed together (Figure 8-16, left). A little padding and margin will fix this.

Add two more properties to the #announcement li style:

padding-left: 25px;
margin-bottom: 10px;

The left padding adds empty space, effectively moving the text out of the way in order to display the new bullet icon. The bottom margin adds just a bit of breathing room between each list item (Figure 8-16, middle).

There’s just one final flaw. The bullet image is a tad too high on the line, causing the tip of the icon to stick out too far above the text. But you can easily fix that with the background-position property.

Finish this style by adding background-position: 0px 4px;. The completed style should look like this:

#announcement li {
  list-style: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  background-position: 0 4px;
  padding-left: 25px;
  margin-bottom: 10px;
}

This last style declaration positions the bullet icon to the far left (that’s the 0) and 4 pixels from the top (4px) of the list item. It moves the icon down just a smidgen, enough to make the bullet look perfect.

Save the file and preview the page in your browser.

The list should now have 3-D tabs with red exclamation marks instead of dreary black circles (Figure 8-16, right).

Return to your text editor and the bg_images.html file. Locate the #announcement style you added in step 6 on Replacing Borders with Graphics and add one additional property:

#announcement {
  background: url(images/scroll_middle.jpg) repeat-y center top;
  margin-top: 115px;
}

This line adds a background image to the <div> tag that scrolls vertically (repeat-y) and centers the image in the div. The image tiles seamlessly so that as the div gets taller, the background image appears to grow. But, if you preview the page now, you’ll see that the bulleted list sticks out on the both the left and right sides of the sidebar image. To make the bulleted list fit on the scroll, you need to add some left and right margin.

Locate the #announcement li style you created earlier and add two properties to the end so that it looks like this:

#announcement li {
  list-style: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  background-position: 0 4px;
  padding-left: 25px;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 40px;
}

These properties move both the left and right edges of each bulleted item in enough to clear the edges of the background image. Next, you’ll add the top of the scroll by placing a background image behind the <h2> tag in the sidebar.

At the bottom of the internal style sheet, add the following descendent selector style for the sidebar’s <h2> tag:

#announcement h2 {
  background: url(images/scroll_top.jpg) no-repeat center top;
}

Here an image is only placed a single time in the center and top of the tag. But if you preview the page right now, it doesn’t look quite right (see Figure 8-18). You can’t see the entire scroll top, and the heading text overlaps it in an unrealistic way. Basically, the <h2> tag isn’t tall enough to display all of the graphic. Also, you need to add some space above the text to push it down below the graphic. The padding property comes to the rescue.

Figure 8-18. If you can’t see all of a background image (the top of the scroll here), then the element isn’t big enough. You can add padding to make room for the entire image.

Edit the style you added in the last step so it looks like this:

#announcement h2 {
  background: url(images/scroll_top.jpg) no-repeat center top;
  padding-top: 70px;
}

The 70 pixels of top padding does two things: pushes the text down to clear the scroll’s top edge and makes the <h2> element tall enough to display the entire image. In fact, the text, “Announcements” isn’t actually sitting on top of the style’s background image at all—it’s sitting on top of the background image placed on the <div>.

Next, you need to add the bottom image to the <ul> tag. But first, you’ll modify the HTML a bit.

Locate the <ul> tag (it’s below the <div id="announcements"> and <h2> tag) and add class="last”:

<div id="announcement">
<h2>Announcements</h2>
<ul class="last">

Why add a class? As pictured in Figure 8-17, the bottom image (the end of the scroll) must be attached to the last tag in the sidebar; that’s how the image appears at the bottom of the scroll. Now, you could just create a style like #announcement ul, which will work in this case, but if you ever want to remove the bulleted list and replace it with paragraphs of text, you’ll need to recreate the style. If you use a class and create a style like #announcement .last, then whenever you change the HTML in the sidebar, you just add class="last” to the last tag in the sidebar. (You can do the same for the <h2> tag. For example, you can create a class named #announcement .first and add class="first” to which every tag comes first inside the <div>.)

In the page’s internal style sheet, add one last style:

#announcement .last {
  background: url(images/scroll_bottom.jpg) no-repeat center bottom;
  padding-bottom: 65px;
}

Like the other styles in this part of the tutorial, here you’re adding a single image to the background of an element. However in this case, the image is being placed at the bottom of the <ul> tag. Since there are quite a few list items, the <ul> tag is actually pretty tall—taller than the background image—so you need to place it at the bottom of the tag, in order for it to appear at the bottom of the <div>.

Save the file and preview it in a web browser.

The sidebar should look like the bottom image of Figure 8-14…unless you’re using IE 6 or IE 7. In those browsers, you don’t actually see anything except the tiled background—no headline, no bullets, and no top and bottom parts of the scroll. Behold another IE browser bug. It’s a variant of the “peekaboo” bug described on Stopping the Float. Thankfully, this bug has been fixed in IE 8, and there’s a way to fix it for IE 6 and IE 7.

Return to the bg_images.html file and add zoom: 1 to #announcement style in the internal style sheet. The final version should look like this:

#announcement {
  background: url(images/scroll_middle.jpg) repeat-y center top;
  margin-top: 115px;
  zoom: 1;
}

This weird, IE-only property adds what’s called layout, which ends up fixing this problem and many just like it. It’s a bit of CSS voodoo that shouldn’t really do anything…but it does (gotta love web design). You learned more about layout and using the zoom property to fix IE bugs on Stopping the Float.