TechNote

New features of Cascading Style Sheets in Dreamweaver MX

The Dreamweaver MX interface incorporates additional CSS editing options. Dreamweaver MX Cascading Style Sheets (CSS) are easier to use, and comply to World Wide Web Consortium (W3C) standards. This TechNote introduces some of the new CSS editing options in Dreamweaver MX.

Note: The Dreamweaver MX Design view renders CSS according to the standards set by the W3C. The W3C CSS Test Suite was used for testing and development.

Update: Dreamweaver MX 2004's implementation of CSS is more advanced than Dreamweaver MX. See the Developer Center article An Overview of CSS in Dreamweaver MX 2004 for information specific to that version.

CSS in the Dreamweaver MX interface

CSS styles applied to text are reflected in both the CSS Styles panel and the Property inspector. Additionally, styles can be applied from either panel, or from the Text menu (Text > Style submenu).

Styles with block-level elements, and most inline-level elements applied in Dreamweaver MX are rendered correctly in the design window. The asterisk, used in earlier versions of the Dreamweaver CSS wizard to indicate styles that rendered only in the browser, is no longer needed. CSS constructs will now render in the design environment.

Dreamweaver MX CSS Styles panel

In the default Dreamweaver MX workspace layout, the CSS Styles panel is located on the Design tab, grouped with the HTML Styles and Behaviors panels. As with any MX panel, it may be ungrouped and floated in the workspace, or regrouped with other panels to accommodate workflow. To access the CSS panel when collapsed or ungrouped, choose Window > CSS Styles, or Shift + F11. There are two option modes: Apply and Edit Styles. When in the Edit mode the CSS window is split vertically.

To see the different modes move the mouse over the image below.

The Apply Styles mode displays custom styles, linked and embedded, and provides the ability to apply them to your page.
The Edit Styles mode displays all styles, linked and embedded, and the properties of each. It also provides easy access for editing styles.

CSS Styles contextual menu

Each mode has the same contextual right-click menu (Windows), Control-click on Macintosh.

Applying a style from the CSS Styles panel. Â

Select the text to which you wish to apply a style.
Click the style displayed in the Apply Styles mode.

Editing a style from the CSS Styles panel.

To open the style definition panel and make changes, double-click (Windows) or Control-click (Macintosh) on the style or CSS file you wish to edit.
Choose an individual CSS style from the CSS Styles panel. Click the Edit button (shown below) and make changes as desired.

MX Property inspector

The Property inspector now has the ability of formatting text with CSS. CSS attributes are also displayed in the Property inspector. To access the Property inspector choose Window > Properties or Control + F3 (Macintosh). Use the image below to toggle the CSS and HTML options by clicking on the letter A (CSS/HTML toggle button) or the Font list drop-down menu.

Change the property's context from HTML tags to CSS.
The Property inspectordisplays the CSS style attributes for the text selected.
Use the drop-down Style list to assign styles.

Note: Do not edit the style from here. Edits made with the Property inspector will generate HTML tags.

CSS wizard changes

The Box category properties default to auto-complete all values at once. To set the Box attributes differently, deselect the Same for All option and set them individually.

Design Time Style Sheets

A new feature created for the developer's convenience is the Design Time Style Sheets option. For example, this handy feature can be used to see text in the draft stage or to hide a background image.

Choose the drop-down arrow in the top-right corner of the Design tab > Design Time Style Sheets.

Or right-click the style (Windows), Control-click (Macintosh), and choose Design Time Style Sheets.
Use the plus (+) and minus (-) buttons to setup the CSS file visibility.

Note: Each external CSS file is either turned on or off in Design Time Style Sheets. Individual styles within a CSS file cannot be hidden or shown at design time only. Internal style sheets cannot utilize the Design Time feature.

W3C Tags

Dreamweaver MX uses the default tags for bold text and for italic text, instead of the and tags. To use the and tags, choose Edit > Preferences > General.

External Editors

Dreamweaver MX will recognize TopStyle an external CSS editor. To specify TopStyle as the default CSS editor, choose Edit > Preferences > File Types/Editors.