Section 7.7. Tutorial: Margins, Backgrounds, and Borders

7.7. Tutorial: Margins, Backgrounds, and Borders

In this tutorial, you'll explore elements of the CSS box model, adjust the spacing around objects on a page, add colorful borders to items on a page, and control the size and flow of page elements.

To get started, you need to download the tutorial files located on this book's companion Web site at www.sawmac.com/css/. Click the tutorial link and download the files. (All of the files are enclosed in a ZIP archive. See detailed instructions for unzipping the files on the Web site.) The files for this tutorial are contained inside the chapter_07 folder.

7.7.1. Controlling Page Margins

As usual, you'll be working on a Web page from CosmoFarmer.com. You'll start by controlling the margin around the edges of the Web page.

Tip: For a sneak preview of the final result, check out Figure 7-18.

Launch a Web browser and open the file chapter_07 sidebar.html .

In this case, there's already an external style sheet attached to the page that adds some basic text formatting, as you can see in Figure 7-15.
In your favorite text editor, open chapter_07 sidebar.html .

Start by adding an internal style sheet to this file.
Click directly after the closing </link> tag (used to attach the external style sheet), hit Enter (Return), and then type <style type="text/css"> .

You've just created the opening style tag. Next , you'll create a style that sets the margin around the edges of the page and adds a color to the background.
Press the Enter (Return) key, and then type the following style :
```
 body {     margin-top: 15px;     margin-left: 0;     margin-right: 0;     padding: 0;     background-color: #f8faf1; } 
```
This style makes the page's background a light gray-green. The margin settings indent the page content 15 pixels from the top of the window but remove all space from the left and right edges. In other words, content butts right up against the left and right edges of the browser window. You could have done the same thing with the margin shorthand property (Section 7.2.1) like this: margin: 15px 0 0 0 ;.

Figure 7-15. This Web page has some basic text styling, but it'll look a lot better with a box model makeover.

Note: The padding property ( padding: 0 ;) in this style accommodates the Opera browser, which uses padding instead of margin to define the space around the edges of the browser window.

Finally you'll add the closing <style> tag to complete the style sheet.
Hit Enter (Return) to create a new, blank line, and then type </style> .

Your style sheet's complete and you're ready to check the page.
Save the file and preview the page in a Web browser .

The top line of text is placed a little way down from the top of the browser window, while the left edge of each headline and paragraph touches the left side of the browser window. The type looks cramped on the left side like that, but you'll fix it later in this tutorial.

Next, adjust the spacing around the headlines and paragraphs.

7.7.2. Adjusting the Space Around Tags

Web browsers automatically insert a bit of space above and below headlines, paragraphs, lists, forms, and other block-level HTML elements. The exact amount varies from browser to browser, so you get more predictable results by setting this value yourself, as described in the following steps.

Return to your text editor and the sidebar.html file. Click at the end of the closing brace of the body tag selector, press Enter (Return) to create a new line, and then add these two styles :
```
 h1 {     margin: 0; } h2 {     margin-top: 10px;     margin-bottom: 0; } 
```
The first style removes all margins from all <h1> tags, and the second removes the bottom margin from all <h2> tags and sets their top margins to 10 pixels. If you preview the page now, you'll see that it actually doesn't look any different. But you can detect a gap above the <h1> tag at the top of the page, as well as space above and below each <h2> tag. That's because there are still margins above and below the paragraph tags and the <h3> tag ("Ideas for Better Indoor Agriculture").

Note: The gap between the <h2> and <p> tags didn't change at all because the bottom margin of the <h2> tag and the top margin of the <p> tag were already collapsed . (See Section 7.2.2 to learn more about the mystery of collapsing margins .)

Next, remove the space between the tops of the paragraphs and the bottoms of the <h2> tag.
Click at the end of the closing brace of the h2 tag selector, press Enter (Return) to create a new line, and then add this style :
```
 p {     margin-top: 0;     margin-bottom: 10px; } 
```
Save the file and preview the page in a Web browser .

The gap between the headline and the paragraphs below has gone away, but there's still a 10-pixel space between each paragraph thanks to the margin-bottom setting (Figure 7-16).

Figure 7-16. With just a few short styles, you can add background colors, control margins throughout the page, and tighten up the space between headlines and paragraphs.

7.7.3. Emphasizing Text with Backgrounds and Borders

Backgrounds can colorize a page or highlight a sidebar, but you can use them for plenty of other purposeslike making headlines stand out. Borders, too, are more versatile than they get credit for. Sure, they're fine for framing images, adding lines around tables, and drawing boxes on a Web page, but a single border can draw attention to headlines, separate paragraphs of text, and replace the gray, clunky -looking HTML <hr> tag. In this section, you'll use backgrounds and borders to emphasize the page headings.

Return to your text editor and the sidebar.html file .

It's time to edit the h1 style you already created.
Add two properties to the h1 style, so that it looks like this :
```
 h1 {     margin: 0;  border-top: solid 2px #fbef99;     border-bottom: solid 2px #fbef99;  } 
```
These two properties add a yellow line above and below the headline. If you preview the page now, you'll see the two lines are too close to the text. There could also stand to be a little more breathing room between the left edge of the page and the text in the headline. You'll make those two adjustments next.
Add some padding to the h1 style :
```
 h1 {     margin: 0;     border-top: solid 2px #fbef99;     border-bottom: solid 2px #fbef99;  padding: 5px 0 5px 25px;  } 
```
Padding indents the text of the headline from its borders. This shorthand method of specifying the padding properties (Section 7.2.1) indents the text 5 pixels from the top line, 0 from the right edge, and 5 pixels from the bottom line while indenting the left edge 25 pixels.

If you preview the page, you'll see that the two lines extend the full length of the browser window, touching both the left and right edges, while the headline text is nicely indented. Now you can see the reason for setting the left and right margins of the body to 0it allows the heading's border lines to extend across the browser window without gaps on the left or right side. In a moment, you'll also indent the h2 and p tags, but first add a bit more punch to that opening headline by adding a background color.
Add two more properties to the h1 stylea background color and a text colorlike so :
```
 h1 {     margin: 0;     border-top: 2px solid #FBEF99;     border-bottom: 2px solid #FBEF99;     padding: 5px 0 5px 25px;  background-color: #294e56;     color: #fff;  } 
```
With this adjustment, the white headline text jumps out from a dark stripe across the page. Next, add a bottom underline to each <h2> tag.
Edit the h2 style by adding a margin and bottom border, as follows :
```
 h2 {     margin-top: 10px;     margin-bottom: 0px;  margin-left: 25px;     border-bottom: 1px solid #5f9794;  } 
```
The left margin indents the headline, moving it away from the left edge of the browser window and aligning it with the text in the <h1> tag. You need to make the same change to the paragraph tags, in order to line them up as well.
Add a 25px left margin to the p style :
```
 p {     margin-top: 0;     margin-bottom: 10px;  margin-left: 25px;  } 
```
This step indents the paragraphs to match the indent of the other headlines. You can also rewrite these three margin settings using the margin shortcut property: margin: 0 0 10px 25px ;.
Save the file and preview the page in a Web browser .

The page should look like Figure 7-17. The bulleted list of items doesn't look very good yet. This sidebar element needs to look like a real sidebarplaced in its own box and moved to the side of the page. You'll do that in the next section.

7.7.4. Building a Sidebar

Sidebars are common elements in most types of print publications like magazines, books, and newspapers. They compartmentalize and highlight small chunks of information like a resource list, contact information, or a related anecdote. But to be effective, sidebars shouldn't interrupt the flow of the main story. They should, like the name says, sit unobtrusively off to one side, which you can easily make happen with CSS.

Return to your text editor and the sidebar.html file .

First, you must isolate the region of the page that makes up the sidebar. The <div> tag (Section 3.1) is the perfect tool. You can enclose any amount of HTML into its own self-contained chunk by wrapping it in a <div> tag.
Click before the opening <h3> tag (the one with the "Ideas for Better Indoor Agriculture" headline). Then type < div class="sidebar" >, and press Enter (Return) .

This CSS marks the beginning of the sidebar and applies a class to it. You'll create the .sidebar class style in the next step, but first you need to indicate the end of the sidebar by closing the <div>.
Click after the closing </ul> tag. (This indicates the end of a bulleted list.) Press Enter (Return), and then type </div> .

You've just wrapped a headline and bulleted list inside a <div> tag. Next, you'll create a style for it.

Figure 7-17. A dark background color can make a headline pop, like the top headline on this page. The padding property opens up the headline by moving the text away from the edges of the border and more strongly highlighting the background. A single border adds subtle emphasis to second level headlines.
In the page's style sheet, add the following style below the <p> style you created earlier :
```
 .sidebar {     width: 200px;     float: right;     margin: 10px; } 
```
This style sets the width of the content area (where the text appears) to 200 pixels, floats it to the right side of the browser window, and adds 10 pixels of space around the box.

If you preview the page in a browser, you'll see that the basic shape and placement of the sidebar's set, but there's one problem: The <h2> tags appear under-neath the box. Even though the floated sidebar moves the text of the headlines out of the way, floats don't displace border or backgrounds. Those just appear right under the floated sidebar (see Section 7.6.1). You can easily adjust for this bit of CSS frailty by editing the <h2> tag style you created earlier.

Note: If your site's audience includes a lot of Opera fans (the Web browser, not the musical extravaganza), then skip step 5 and just live with the border extending underneath the floated sidebar. This fix is more like a break for that browser.
Locate the h2 style and add the overflow property, like so :
```
 h2 {     margin-top: 10px;     margin-bottom: 0px;     margin-left: 25px;     border-bottom: 1px solid #5F9794;  overflow: hidden;  } 
```
Setting the overflow property to hidden hides the borders that pass beyond the headline text and under the floating element. (Unfortunately, Internet Explorer 6 and 5 don't get it and still display the borders underneath the sidebar. But you'll fix that in the next section.)

In the meantime, make the sidebar stand out by adding a border and background color.
Add the following two properties to the .sidebar style :
```
 border: solid 1px #fdd041; border-top-width: 5px; 
```
The first property, border , is a shorthand method of setting the style, width, and color of all four borders. In this, case, it creates a 1-pixel, solid yellow line around the sidebar. The second property, border-top-width , overrides the 1-pixel width set by the border property, creating a thicker top border for some visual interest.

Finally, you'll add a little padding to indent the text from the inside edges of the box, as well as a background color.
Add two more properties to the sidebar style, like so :
```
 .sidebar {     width: 200px;     float: right;     margin: 10px;     border: solid 1px #fdd041;     border-top-width: 5px;  padding: 10px;     background-color: #fbef99;  } 
```
The background-color property adds a light yellow color to the sidebar and covers the borders of the <h2> tags. To finish up the sidebar, you'll create a few descendent selectors to control the formatting for the tags inside the sidebar.

First, you'll address the <h3> tag, which in some browsers (notably Firefox) has unnecessary space above it.
Add this style to your style sheet :
```
 .sidebar h3 {     margin: 0;     text-align: center; } 
```
This descendent selector style affects only <h3> tags that appear inside a tag that has the .sidebar class applied to it. It centers the text and eliminates any margins around the headline. Because Web browsers indent lists, you'll notice that the bulleted list in the narrow sidebar looks weird with such a large left indent.
Add one more style to the style sheet :
```
 .sidebar ul {     padding: 0;     margin: 10px 0 0 0; } 
```
Because some browsers use the left padding property and others use the left margin property to indent lists, you need to make sure both are set to 0 in order to reliably eliminate a left margin from lists. In this case, we've added 10 pixels of top margin space above the list to separate it a bit from the headline above.

If you preview the page now, you'll notice one big error. The bullets appear either outside of the sidebar box, or not at all (in the case of Internet Explorer). Simply adding a little indent to the list items brings the bullets back into view.
Add the following style to indent each bulleted item :
```
 .sidebar li {     margin-left: 1.5em; } 
```
This style adds enough space to the left of each list item, moving the bullets back into view. Now it's time to preview your handiwork.
Save the file and preview the Web page in a browser .

The page should look like Figure 7-18.

Unfortunately, the page doesn't look like Figure 7-18 in Internet Explorer 6 or 5 for Windows. A couple of bugs in those browser versions affect the page's appearance for the worse . Read on for the fixes.

7.7.5. Fixing the Browser Bugs

While the sidebar.html file looks just fine in Internet Explorer 7, earlier versions of that browser don't display the page correctly. If you have access to either of these browsers, check it out. You'll see the problems.

Figure 7-18. A handful of CSS styles adds design elegance to ho-hum HTML. Notice how the floated sidebar both attracts attention and moves it out of the way of the main body of text.

For one thing, the border under the two <h2> headlines travels underneath the sidebar. In step 5 in Section 7.7.4, you used the overflow property to fix this problem in most browsers, but you need something else to get IE 5 and 6 straightened out. In addition, the margin around the sidebar is noticeably larger on the right. And in IE 5, the sidebar's much smaller than in other browsers.

Tip: If you don't have access to check for yourself, just trust that problems are there and use this section to learn how to fix them for the sake of your visitors who are stuck with IE 5 or 6.

The first bug, the overextended borders, affects both IE 5 and 6. You'll tackle this one first:

Return to your text editor and the sidebar.html file .

You first need to create a style that only Internet Explorer 6 and earlier can read.
Add this new style to the end of the sidebar.html page's style sheet :
```
 * html h2 { } 
```
The * html part of the style is in fact an incorrect CSS selector. However, IE 6 and earlier consider it legitimate , so by adding h2 to create a descendent selector, Internet Explorer 6 and earlier treats this as a valid style for formatting any <h2> tag. (See Section 7.6 for more on this technique.)

So far, you've just got an empty style. Time to add some properties.
Add the following property to the new style :
```
 * html h2 {  zoom: 1;  } 
```
Zoom isn't an official CSS property. It's a Microsoft-only property meant to enlarge an element on a page. That's not why you're using it here, though. In this case, the zoom property prevents the border from extending under the float in IE 5 and 6. It fixes the border bugalbeit in a completely arcane way. (See the box in Section 11.1 for more details on this browser voodoo.)

Next problem: The double-margin bug that's causing that extra space on the right side of the sidebar. Since this bug affects both IE 5 and 6, you'll create another * html style for the sidebar. (Remember, * html hides the rest of this selector .sidebar from all browsers except IE 6 for Windows and earlier.)
Add this style to your style sheet :
```
 * html .sidebar {     display: inline; } 
```
This use of the display property is another nonsensical bit of CSS. But it does the job: It tricks IE into removing the extra right-hand margin. (See Section 11.1 for a full explanation.)

Two down, one to go. Internet Explorer 5 on Windows incorrectly calculates the width of the sidebar, so it looks thinner than in other browsers. Blame it on the old IE 5 box model bug (see Section 7.5.3).
To fatten up the skinny sidebar, add this property to the * html .sidebar style :
```
 width: 222px; 
```
Why 222 pixels? The .sidebar style you created in step 4 in Section 7.7.4 has a width of 200 pixels. All other browsers dedicate 200 pixels to the content onlythe headline and bulleted list. IE 5, on the other hand, includes the widths of the borders and padding as part of this 200 pixels, making the actual area dedicated to the content much smaller in that browser. For IE 5 to provide the same room as other browsers for the headline and bulleted list, you need to give a width value equal to the combined width of the content, borders, and padding . So, 200 pixels (the width value for the content) plus 2 pixels (the width of the left and right borders), plus 20 pixels (the widths of the left and right padding) equals 222 pixels.

At this point, you've successfully tricked IE 5 to display the sidebar at the same width as all other browsers. But you're not off the hook yet. Because IE 6 also gets this width sent to it, you must tell IE 6 to reset the width property back to 200 pixels.
Add one final property to this style so that it looks like this :
```
 * html .sidebar {     display: inline;     width: 222px;  w\idth: 200px;  } 
```
No, that backslash isn't a typo, nor is it teenage text-messaging slang for "your jeans are too tight." The backslash in the property name w\idth is just another example of strange -but-true browser trickery . IE 5 ignores the misspelled property, while IE 6 understands that it's the width property and that you're setting its value back to 200px. (See Section 7.5.3 for all the gruesome details.)
Save the file and preview the page in Internet Explorer 5 or 6 on Windows .

The page should now look like Figure 7-18 in those browsers as well. Dealing with these browser bugs is an unfortunate reality for every Web developer. You'll learn solutions (also known as hacks ) to particular bugs throughout this book. Also, in Chapter 14, you'll learn even more strategies for dealing with hacks used to fix Internet Explorer browser bugs.

7.7.6. Going Further

To try out your newfound skills, try this exercise on your own: Create a class style for formatting the copyright notice that appears at the bottom of the sidebar.html page (called, say, .copyright ). In this style, add a border above the copyright notice, change its text color, shrink its font size, and change the type to uppercase. (Hint: Use the text-transform property discussed in Section 6.3.2.) After you've created the style, apply it to the paragraph with the copyright notice.

The solution's in the sidebar_finished.html file inside the ch07_finished folder.