by Geoff Blake
(originally published on DreamweaverCafe.com, August 2007)

In previous versions of Dreamweaver, it was a major drag to move CSS rules around, or to keep them sorted and organized. Not to dig up dead horses and beat ‘em to…err, death, but the seemingly simple task of moving internal CSS rules to an external style sheet involved the hefty task of exporting the rules; then manually deleting the internal style sheet and hooking up to the new external sheet. Or to simply sort and organize your styles, it was a matter of literally copying and pasting them, hoping to keep everything straight in your head. And of course, the odd time you’d miss a closing bracket or something, not realize it right away, and wind up totally messing up your style sheet. “Damn it!” I’d cry as my style sheet would blow up before my eyes, my fists crashing down into my keyboard.

But let’s not lament on the past. Thankfully in Dreamweaver CS3, all that muckin’ around is a thing of the past. Moving CSS rules, organizing them, and sharing them between your different style sheets is a breeze. It’s super-fast, easy, and you can bill for it! Plus it sure saves on bruised fists and busted keyboards. With the latest version of Dreamweaver, you can easily move rules from an internal style sheet to an external style sheet or the other way around, or you can dump rules back and forth between two external style sheets.

Movin’ CSS Rules Around

We’ll start things off with moving your existing CSS rules to other style sheets. Make sure you have your page with your internal style sheet open, or if you have an external style sheet handy, open ‘er up. Also, make sure Dreamweaver’s CSS Style panel is open (Window > CSS Styles), and that the All button at the top is selected. The steps below will work whether you’re moving styles from an internal or an external style sheet.

Here’s how it works:

1. Over in the CSS Styles panel, select the rules that you’d like to move.

Select mulitple rules by using Shift, or Ctrl (Windows) or Cmd (Mac). Alternatively, you could select the rules you’d like to move in Dreamweaver’s Code view.

2. Right-click on the rules you’ve selected; then choose Move CSS Rules.

[ Back to Web + Mag Articles ] [ Go to page: 1 | 2 | 3 | 4 ]