Tip: Dreamweaver 8 CSS Styles panel improvements

Dreamweaver 8 is more CSS-friendly than previous versions. I’m going to describe a couple of welcome improvements in the CSS Styles panel.

If you select a style or element in the document window, the CSS Styles panel displays information about it in two modes now: All or Current. There are now three views to choose from, controlled by three icons at the lower left. If you select Current mode and click the Show only Set Properties icon Show on Set Properties icon you’re treated to a big bag of very specific information. This is the mode and view I want to talk about in more detail.

CSS Styles Panel for Dreamweaver 8

The highlighted style can then be inspected and edited for its individual properties. The new About pane gives information about inheritance and can help you clear up Cascade problems if you are experiencing a conflict. The Properties pane also gives information about inheritance. Properties inherited from a style further up in the cascade are indicated by a strikethrough of the selector name.

Property names with strikethough

Hover over the property with the strikethrough, and you’ll see a pop-up window explaining more.

Together, the new Current mode, Show Only Set Properties view, and About pane constitute useful advances in Dreamweaver 8′s CSS interface.

2 thoughts on “Tip: Dreamweaver 8 CSS Styles panel improvements

  1. Hello Virginia,

    Many thanks for this shot of the styles. So I can bring my WordPress style sheet into Dreamweaver.yes? At the minute I have light green h2 and dark green elsewhere on black. I now need to be rid of Orange as it does’nt look right now..I think at one time this evening I had pink text lol

    At least I am finding things to change now where before I had’nt a clue. I left a message on my WordPress to say bear with me on the color scheme.

    Thanks again Virginia
    Kate

  2. I could have sworn that yesterday when I looked at your blog it was at blogspot. I’m confused.

    The colors you are using now seem to my eye to contrast better. To check, I ran your styles sheet URL through the color contrast analyzer at Juicy Studio (http://juicystudio.com/services/csstest.php) and it came back that the body has sufficient contrast. A few smaller areas didn’t have enough contrast, according to the test.

    To answer your question about WordPress, yes, you can certainly work on the styles for a WordPress blog in Dreamweaver.

Leave a Reply