The CSS Styles Panel in Dreamweaver 8: A Sneak Peek

By: Zoe Gillenwater

Page 1 of 2

Set for printing


Dreamweaver 8 makes it easier than ever before for web designers to lay out and format their content using CSS instead of tables and font tags. This is because not only does Dreamweaver 8 feature better support for rendering advanced CSS, but it also comes with many extremely useful new CSS tools. Kim Cavanaugh covered the new CSS layout visualization tools in his article Visualize This: Great New Design Tools in Dreamweaver 8, and Adrian Senior covered the new Style Rendering toolbar in his article Dreamweaver 8 Style Rendering Toolbar - A Sneak Peek. In this article, I'll show off the new CSS Styles panel using our Vienna JumpStart as an example.

Creating and Editing Style Rules

In previous versions of DW, CSS information for your page was kept in the Design panel group. In DW 8, this panel group has been replaced with one named simply CSS, and it contains the new, unified CSS Styles panel. The CSS Styles panel lets you create, view, edit and remove styles, just as before, but with an improved interface that makes working with your rules much faster.

The new panel features two viewing modes, All and Current, that you can toggle between using buttons at the top of the panel. The All mode lists all the rules that apply to a page in the order that they appear in the style sheets, similar to what was displayed in Dreamweaver MX04, only now the properties for each rule are listed below, rather than off to the right of the rule (Image 1). This makes viewing and editing the properties for a given rule much faster.

Image 1: The CSS Styles panel in All mode lists all rules from the applied style sheets of whatever page you have open and provides an easy way to edit each of their properties in the lower half of the panel.

To edit a rule, simply select it, then click on the value of the rule you want to change and make whatever edits you desire. Whatever changes you make are instantly reflected in the Design view of your page. If you prefer to use the old dialog box to edit rules, you can still do so by selecting a rule and clicking on the Edit Style button (pencil icon) at the bottom of the panel.

By default, only the properties that are already set for a rule are shown. To add a new property, simply click on "Add Property" and choose the property from the drop-down menu that appears. If you would prefer to see all available properties instead of just the ones that are already set, you can use the buttons at the bottom of the panel to either display all properties grouped into categories (left-most button) or all properties alphabetically (second to left button). Then, just locate the property you want in the list and fill in the blank to its right with your desired value.

Page 1 of 2 1 2 Next

Download Support Files

Dreamweaver 8, CSS Styles panel, style sheets, stylesheets, styles, rules, properties, values, Summary for Selection pane, cascade, specificity, inheritance