Managing CSS Rules in Dreamweaver CS6

Synopsis: A major strength of CSS rules is that they can be used throughout a site, and even made available to other sites, by using external style sheets. This article looks at some of the most important aspects of the management of CSS rules.

Once you have some CSS rules defined, you can look at them using the CSS Styles panel.

With the All tab selected near the top of the panel, you can see all of the rules that are available. They are arranged in a tree structure, and here you can see some of the rules in two style sheets, springspark01.css and SpryMenuBarVertical.css.

The properties of the selected (highlighted) CSS rule are shown in the Properties window towards the bottom of the panel.

At the bottom of the CSS Styles panel there are two groups of buttons. The group on the left control what is shown in the panel. The group on the right can be used to create new rules, edit existing rules and delete rules. For example, if you click the second button in the right hand group (fourth from the right) you see the New CSS Rule dialog.

The third (middle) button in the group on the right is used to edit an existing CSS rule.

The leftmost button in the group on the right can be used to attach additional style sheets.

If there are internal styles on the current page they are listed in the CSS Styles panel separately, as shown here.

In this example the <p> tag has the font color set to white.

It is straightforward to move CSS rules between style sheets, to make internal styles external and vice versa.

If you select an internal style in the CSS Style panel, for example, and right click, you can select the option “Move CSS Rules…”. This invokes the Move To External Style Sheet dialog.

Here you can choose to move the internal style to one of the existing external style sheets that are already attached to the page, or to move it to a new external CSS style sheet that Dreamweaver CS6 will create for you.

You can also use the same approach for moving external styles between sheets. This can be particularly useful if you want to use several styles in another site or page, and you want to create a single new external style sheet containing these styles.

You can also move rules between style sheets by clicking with the mouse and dragging up or down within the CSS Styles panel.

There are some other useful ways that you can use the CSS Styles panel to manage CCS rules.

The rightmost command button lets you delete a rule that you no longer need.

In addition, if you want to see what effect each of the properties of a rule are having you can enable or disable individual properties by selecting the rule, then selecting the individual property or properties, and using the “Disable/Enable CSS Property” button (second from the right in the right hand group) to disable or enable the relevant property.

Learn website design. Get 12 hours of Dreamweaver CS6 training by Simon Sez IT.