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

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.