DekGenius.com
Previous Section Next Section

10.2 CSS Operations

Table 10-2 gives a quick overview of using CSS Styles in Dreamweaver. The remainder of the chapter covers these operations in detail.

Table 10-2. CSS operation summary

Operation

Shortcut

Open the CSS Styles panel

Window figs/U2192.gif CSS Styles, Shift+F11, or the CSS Styles icon in the Launcher bar

Add a style to an internal or embedded stylesheet

Text figs/U2192.gif CSS Styles figs/U2192.gif New Style

Attach an external stylesheet using the <link> tag[1]

Text figs/U2192.gif CSS Styles figs/U2192.gif Attach Style Sheet

Attach an external stylesheet using the @import directive

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet figs/U2192.gif Link figs/U2192.gif Import

Detach an external stylesheet

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet figs/U2192.gif Remove

View a list of external stylesheets and embedded styles

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet;

Ctrl+Shift+E (Windows); Cmd+Shift+E (Macintosh)

Export embedded styles to an external .css file

Text figs/U2192.gif CSS Styles figs/U2192.gif Export CSS Styles

Convert CSS styles to HTML styles

File figs/U2192.gif Convert figs/U2192.gif 3.0 Browser Compatible

Apply a class selector[1]

Text figs/U2192.gif CSS Styles figs/U2192.gif stylename or use Set Class in the Tag Selector's contextual menu

Apply an ID selector

Use Set ID in Tag Selector's contextual menu

Duplicate an embedded style

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet figs/U2192.gif Duplicate

Duplicate an external style

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet figs/U2192.gif Edit figs/U2192.gif Duplicate

Delete an embedded style[1]

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet figs/U2192.gif Remove

Delete an external style from an external stylesheet

Text figs/U2192.gif CSS Styles figs/U2192.gif Edit Style Sheet figs/U2192.gif Edit figs/U2192.gif Remove

View a list of styles in an external stylesheet

Double-click .css file in Site window; Ctrl-click (Windows) or Opt-click (Macintosh) the Edit Style Sheet button in the CSS Styles panel

Remove a style attached to a single element (clear styling)[1]

Text figs/U2192.gif CSS Styles figs/U2192.gif None

[1] Also available as an option in the CSS Styles panel.

We'll continue our top-down tour of CSS styles in sequential order. We'll cover the different places where CSS styles can be stored and then cover the different types of CSS styles.

    Previous Section Next Section