CSS: The Missing Manual

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 http://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.

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.

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

2. In your favorite text editor, open chapter_07 → sidebar.html .

   Start by adding an internal style sheet to this file.

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

4. Press the Enter (Return) key, and ...