DekGenius.com
Previous Section Next Section

10.7 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 figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet, Ctrl+Shift+E (Windows), or Cmd+Shift+E (Macintosh).

  • Select CSS Styles figs/U2192.gif 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.

10.7.1 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 figs/U2192.gif Preferences figs/U2192.gif Invisible Elements figs/U2192.gif Embedded Styles and View figs/U2192.gif Visual Aids figs/U2192.gif Invisible Elements options are enabled.)

You can also edit an embedded class selector style by double-clicking its name in the CSS Styles panel. To edit other types of style rules (type selectors and ID selectors) use the Edit Style Sheet dialog box, or hand-edit them in Code view.

10.7.2 Editing Styles in External Stylesheets

Editing a style that has been stored in an external stylesheet is similar to editing an embedded style, but there are some important differences. You can double-click the name of an external style in the CSS Styles panel, but as with embedded styles, this panel shows class selector styles only.

To edit the other types of style rules (type selectors and ID selectors) open the Edit Style Sheet dialog box (see Figure 10-2). This dialog box shows the name of external stylesheets, not their individual styles. Double-click an external stylesheet to open another dialog box (see Figure 10-4) that lists all styles found within that external stylesheet. From this dialog box, you can Link to a new stylesheet file, create a new style, edit an existing style, duplicate an existing style, or remove a style from your document.

To edit the CSS code in an external stylesheet directly, edit the .css file in an external text editor (restart Dreamweaver to force it to recognize changes to external .css files). If you try to open a .css file in Dreamweaver, Dreamweaver presents a dialog box similar to the one shown in Figure 10-4.

    Previous Section Next Section