Overview of CSS features in Dreamweaver CS3

Familiar features

The CSS implementation introduced in Dreamweaver MX 2004 and refined in Dreamweaver 8 remains substantially the same. Therefore, developers who have been using Dreamweaver 8 will find the move to Dreamweaver CS3 an easy one in terms of CSS production. Readers who are upgrading (and who are familiar with CSS in Dreamweaver 8) can jump ahead. New users will benefit from this overview and from any of the Dreamweaver Developer Center articles on CSS written for Dreamweaver 8.

Property inspector

The Property inspector has not changed since Dreamweaver 8, and has changed little since Dreamweaver MX 2004:

• When styling text using the Property inspector, Dreamweaver creates CSS style declarations (unless you deselect the default preference).
• When you style text with a tag selected, Dreamweaver creates the style declaration as a definition for the tag (as long as the tag does not already have a style definition). Otherwise, Dreamweaver creates the style declaration as a new class style.
• Available class styles (whether defined in the document or in a linked or imported style sheet) are listed in the Style pop-up menu.
• The Page Properties button opens the Page Properties dialog box, allowing the user to define styles that affect the page display.
• The Property inspector includes a CSS button, which gives the developer quick access to the pertinent definition in the CSS Styles panel.

Figure 1. Clicking the CSS button opens the CSS Styles panel to the hilite_text style definition

Page properties dialog box

The Page Properties dialog box allows a developer to assign settings that will affect the appearance of the entire page. As of Dreamweaver MX 2004, some of these settings are designated with CSS style declarations. By the way, assigning CSS properties using the Page Properties dialog box writes the code for the properties to the head of the HTML document, even if the document links to an external style sheet. That is fine for now; I show you how to migrate the style declarations to an external style sheet in the "Move styles and style properties among files" section later in this article.

• Choosing settings in the Appearance category will create CSS style declarations for details such as default page font settings, background color and image, and page margins.
• A user may create CSS style declarations for the appearance of each hyperlink state in the Links category.
• The Headings category allows a user to set the font size and color of each heading level, in addition to setting a single font face to be used for all headings.

CSS styles panel

The CSS Styles panel looks and acts very similar to the panel in Dreamweaver 8. I will describe the new functionality in the workflow section, but list the features below that have remained the same.

• The appropriately-named CSS panel grouping includes the CSS Styles panel.
• The CSS Styles panel includes two modes: All and Current. Each mode displays the corresponding style declarations:
  • All mode lists the declarations available to the entire document (in other words, all declarations available in any linked or imported style sheet, as well as declarations coded in the head of the document).
  • Current mode lists the declarations affecting the element selected on the page.
• In the Current mode of the CSS panel, developers can view information about each rule, including the properties defined in the rule. Or developers can view the cascade of rules affecting the selected element, and can negotiate the properties defined for each rule.
• In either All mode or Current mode of the CSS panel, developers can add, edit or delete properties directly within the panel.
• Clicking the Edit Style button in the bottom right corner of the panel will launch the CSS Editor.

CSS display features

Dreamweaver CS3 has improved CSS rendering capabilities that better display your CSS styles while working in Design view.

Page 2 of 7

Previous Page

Next Page