10.7 Editing CSS Styles and StylesheetsBecause 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:
The Edit Style Sheet dialog box shows both embedded styles and external stylesheets. 10.7.1 Editing Embedded StylesTo 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. 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 StylesheetsEditing 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. |