CSS Styles panel

Have you ever wanted to determine what CSS properties are applied to an element on your page? Here’s a general approach on how to do that using the CSS Styles panel in Dreamweaver.
The first trick is selecting the correct element. This is easy for elements like images, but it’s not so easy when working with nested DIV containers. Open your page in Design View. Click inside the element that you are trying to change. Using the “Tag Selector” (the hierarchy of tags at the bottom of the document window), select the right-most tag. Keep selecting the element’s parent (next tag to left) until you have the desired element selected.
The second trick is finding the desired CSS Rule. Open the CSS Styles panel (Window > CSS Styles). Select the “Current” mode to see the CSS applied to the current selection in your page. You’ll see 3 panes:
Top pane:
A read-only (but selectable) list of all properties applied to currently selected element.
Middle pane:
There are 2 modes which can be chosen by buttons on bar: the “Information” view and the “Cascade” view.
By default, you get the “information” view which is a spoken language summary of what you see in the Top pane. This is a bit redundant with the top pane, so change to the “cascade” view (using buttons on right side of “Rules” bar) to see all cascaded rules that apply to the element. Rules are listed in the order of specificity, with most specific rule at the bottom. This is the holy grail when working with CSS. Place mouse over rule to get exact specificity in the tooltip.
Bottom pane:
An editable property list of properties in selected rule. Properties that are crossed-out are overridden in more specific rules. Place mouse over property for tooltip with more details. If you prefer to manually edit CSS, you can right-click any property or rule and use “Go to Code” to quickly get there.
From here, use the cascade view to learn about the structure of the CSS for the element. Start at the most specific (bottom) rule, and make your way to the least specific rule.
If you want to get right to the rule for a particular property, just click on a property of in the Top pane to select the rule with that property in the Middle pane.
Even faster is to double-click on the property. In the Preferences CSS Styles page, you can define the action taken when you double click on a rule.
Happy styling!
Randy Edmunds
Dreamweaver Development

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • I’m having a hard time with Spry in DW CS4. I’m a photographer building my own site. I was modifying Spry Menu’s and I think I’ve butchered it so badly that I can’t get the menus to act properly anymore. Now that I’ve have minimal experience I think I know what not to do, however, is there a way to restore the spry widgets to the original state? I’ve uninstalled and reinstalled DW CS4 but when I do it automatically pulls the existing info off the server and I’m back to having the spry menus in the same mess. Any direction is welcome.
    Thank you!
    Paul K

Share your thoughts

Your email address will not be published. Required fields are marked *