Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

An Overview of CSS in Dreamweaver 8 – The More Things Change, the More They Stay the Same

The More Things Change, the More They Stay the Same

I am cheerful that the interface in this version retains so many of the improvements introduced in the previous version. Since these remnants will continue to be important for user workflow, I am listing them here. Readers who are upgrading (and who are familiar with CSS in Dreamweaver MX 2004) can jump ahead.

Property Inspector

The following interface elements are the same in Dreamweaver 8 as in 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.

Page Properties Dialog Box

The Page Properties dialog box is an important starting point for users creating a page. In this dialog box, you assign settings that will affect the appearance of the entire page. As of Dreamweaver MX 2004 and continuing in this version, 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 “Moving from Document Style to External Style Sheet” 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

I have detailed a host of changes to the CSS Styles panel above, but some things have remained the same. The All mode of the CSS Styles panel will seem very similar to the behavior of the CSS Styles panel in Dreamweaver MX 2004.

In the next section, I will take you through some mini-workflow recommendations for the new CSS features in Dreamweaver 8.