CS3 Sneak Preview: The CSS Panel

By: Adrian Senior

Page 1 of 4

Set for printing


Not everyone can create the right CSS rules, in the right place, on the first try. To get things right, it’s often necessary to move, rename, or otherwise change the structure of your CSS file. Additionally, many people like to introduce CSS changes incrementally to a site, first by getting the CSS working on a single page, and then working on the entire site. Others prefer to step back further and get the CSS working on a single element before trying to make it work for a whole page. The Manage CSS feature makes it easier for you to move CSS rules from document to document, from the head of a document to an external sheet, between external CSS files, and more. You can also convert inline CSS to CSS rules, and place them where you need them—just by dragging and dropping.

In this sneak-peek at the new CSS Panel we will look at all these options, beginning with the ability to reorder your CSS rules in the CSS Panel.

Reordering Your CSS Rules

With the release of Dreamweaver CS3 you can now reorder your CSS rules directly from within your CSS Panel.

Image 1: Select your CSS rule

Select the CSS rule you want to move by left clicking on the rule and holding down the button.

Image 2: Drag the rule into position

With your left mouse button still held down — or main button on the Mac — drag the CSS rule in to the location you require, notice the paper icon that appears while dragging.

Image 3: The rule in its new location

Once you have dragged your rule into its new position you can release the left mouse button and the order of your rules in the CSS Panel will update to reflect the new order in your style sheet. It can be difficult to build your style sheet with every rule in the correct location to take advantage of inheritance and specificity on the first try, the new drag-and-drop features allow you to easily reorder your styles as you require.

Page 1 of 4 1 2 3 4 Next

Download Support Files

Dreamweaver CS3, CSS, Panel, Manage, inline, embedded, linked, drag, drop, code, style sheets