CSS: The Missing Manual, 2nd Edition

Appendix B. CSS in Dreamweaver CS4

Adobe’s Dreamweaver CS4 is a website-building program that takes the drudgery out of creating HTML/XHTML and CSS. Instead of typing lines of code into a text editor, you can click convenient onscreen buttons and menus and watch your design unfold before your eyes. The program even has powerful site-management tools that help you keep track of your site’s pages and links.

Although this book gives you everything you need to know to create your own CSS from scratch, there’s nothing wrong with turning to a visual editor like Dreamweaver to save time. In fact, knowing how CSS works, as this book shows you, is a big help when tweaking or troubleshooting pages created in Dreamweaver.

Note

This appendix focuses solely on Dreamweaver CS4’s CSS features. To learn everything Dreamweaver can do for your website design and maintenance, check out Dreamweaver CS4: The Missing Manual.

Creating Styles

You begin most CSS-related tasks in the CSS Styles panel, which is Dreamweaver’s command center for creating styles. To open it, choose Window → CSS Styles.

Using Figure B-1 as a guide, here’s how to find your way around the CSS Styles panel:

• The All button at the top of the panel lists all internal and external styles for the currently open document. The other button—Current—lets you take a closer look at individual styles.

  Note

  Clicking the minus (–) icon to the left of the style sheet collapses the list of styles, hiding them from view. (On a Mac, the button looks like ...