beautypg.com

The css styles panel in current mode – Adobe Dreamweaver CS3 User Manual

Page 132

background image

DREAMWEAVER CS3

User Guide

125

The CSS Styles panel in Current mode

In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS
properties for the current selection in the document, a Rules pane that displays the location of selected properties
(or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS
properties for the rule applied to the selection.

You can resize any of the panes by dragging the borders between the panes, and can resize columns by dragging
dividers.

The Summary for Selection pane displays a summary of CSS properties and their values for the item currently
selected in the active document. The summary shows the properties for all rules that directly apply to the selection.
Only set properties are shown.

For example, the following rules create a class style and a tag (in this case paragraph) style:

.foo{

color: green;

font-family: ‘Arial’;

}

p{

font-family: ‘serif’;

font-size: 12px;

}

When you select paragraph text with a class style of

.foo

in the Document window, the Summary for Selection pane

displays the relevant properties for both rules, because both rules apply to the selection. In this case, the Summary
for Selection pane would list the following properties:

font-size: 12px

font-family: ‘Arial’

color: green

September 4, 2007