Dreamweaver CS6: The Missing Manual

Cascading Style Sheets Tutorial

In this tutorial, you’ll practice the basic techniques required to create and edit styles. Make sure you grasp the fundamentals covered in the following pages; you’ll be building lots of style sheets in the other tutorials in this book using these same methods.

In this tutorial, you’ll create an external style sheet that formats pages on the Cafe Soylent Green website.

Note

Before getting started, download the tutorial files from www.sawmac.com/dwcs6. See the Note on Note for more details.

Setting Up

Once you download the tutorial files and open Dreamweaver, you need to set up a site for this tutorial. You learned how to do this in the first chapter, but here’s a quick recap—practice makes perfect!

1. Choose Site→New Site.

   The Site Setup window appears.

2. For the Site Name, type CSS Tutorial.

   The only other step required to set up a site is to tell Dreamweaver where to find the site’s files.

3. To the right of the “Local site folder” box, click the folder icon.

   The Choose Root Folder window appears. This is just a window onto your computer’s file system; navigate to the proper folder just as you would when working with other programs.

4. Navigate to and select the Chapter03 folder located in the MM_DWCS6 folder. Click the Select button (Choose on Macs) to select this folder, and then, in the Site Setup window, click Save to complete the process of defining a site.

   You should see two files—about.html and events.html—in the Files panel. (If you don’t see the Files panel, choose ...