Editing CSS Styles and Stylesheets

Because stylesheets are merely collections of styles, editing a stylesheet means to add, remove, or edit the styles within it. Perform these operations in the Edit Style Sheet dialog box (see Figure 10-2).

Here are several ways to open the Edit Style Sheet dialog box:

  • Click the Edit Style Sheet button in the CSS Styles panel.

  • Use Text CSS Styles Edit Style Sheet, Ctrl+Shift+E (Windows), or Cmd+Shift+E (Macintosh).

  • Select CSS Styles Edit Style Sheet from the contextual menu in the Document window.

  • Click the CSS Styles icon in the Head Content bar to open the Property inspector, and click the Edit Style Sheet button in the Property inspector.

The Edit Style Sheet dialog box shows both embedded styles and external stylesheets.

Editing Embedded Styles

To edit an embedded style, double-click its name in the Edit Style Sheet dialog box. This action opens the Style Definition dialog box, where you can modify a style using Dreamweaver’s friendly UI. Embedded styles can also be edited by hand using Code view. (Although <style> tags belong within the <head> portion of a document, a <style> tag within the <body> portion of a document is indicated by a shield icon as shown in Figure 18-1. The placeholder icon is visible only if the Edit Preferences Invisible Elements Embedded Styles and View Visual Aids Invisible Elements options are enabled.)

You can also edit an embedded class selector style by double-clicking its name in the CSS Styles panel. ...

Get Dreamweaver in a Nutshell now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.