Cascading Style Sheets Tutorial

In this tutorial, you’ll create an external style sheet for a Web page on the Cosmopolitan Farmer Web site.

Note

As usual, this tutorial requires some half-finished starter documents from the Web. Using your Web browser, visit http://www.sawmac.com/dwmx/. Click the Tutorials link to go to the tutorials page. Then click the link CSS Tutorial—Mac files or CSS Tutorial—Win files, depending on the computer you’re using.

When the files are downloaded and decompressed, you should have a folder named DWCSS on your computer, containing the Web pages and graphics for this tutorial.

Creating an External Style Sheet

Once you’ve downloaded the tutorial files and opened Dreamweaver, choose the DWCSS folder as your site folder, using the site-definition routine described on page 25. (For a shortcut, choose SiteNew Site, click the Advanced tab, type something like CSS Tutorial in the Site Name field, click the folder icon next to the Local Root Folder field, navigate to and select the folder DWCSS, and then click Choose or Select. Finally, click OK.)

Now you’re ready to begin defining a style sheet. In this example, you’ll create a collection of styles for the Reviews section of the Cosmopolitan Farmer Web site.

  1. Choose File Open; navigate to and double-click the file in the DWCSS folder called mowers.html.

    The Web page contains Cosmopolitan Farmer’s 2002 Apartment Mower Round-up review (see Figure 8-18). The page’s text is a bit boring looking, so you’ll use CSS

Get Dreamweaver MX: 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.