Dreamweaver in a Nutshell-Dreamweaver in a Nutshell

10.6 CSS Styles Panel

Now that we've covered how and where to define styles, we can get down to the business of using them. The CSS Styles panel, shown in Figure 10-15, allows you to create new styles, apply existing styles, or attach new stylesheets. Open the CSS Styles panel using Window CSS Styles, Shift+F11, or the CSS Styles icon in the Launcher bar.

Figure 10-15. The CSS Styles panel

The CSS Styles panel shows styles from both embedded and external stylesheets (it shows the names of the styles themselves, not the names of the stylesheets). It shows only class selector styles (those that start with a period). Type selectors (those that redefine HTML tags), pseudo-class selectors (such as a:link), and ID selectors (those starting with #) appear in the Edit Style Sheet dialog box instead.

The options available within the CSS Styles panel include:

Auto Apply checkbox: Applies the style you click on in the CSS Styles panel to the currently selected element in your document. If this checkbox is unchecked, you must click the Apply button manually to apply a style, which can be tedious.
Apply button: Applies the currently selected style to the selected element in your document.
Attach Style Sheet: Attaches an external stylesheet to the current document making the styles it contains available within the current document.
New Style: Creates a new style that can be stored in either an external stylesheet or within the current document.
Edit Style Sheet: Opens the Edit Style Sheet dialog box, as seen in Figure 10-2, where you can choose the stylesheet to edit, create new styles, etc.
Delete Style: Deletes the selected style from either the external stylesheet file or from within the current HTML document.

10.6.1 Applying and Clearing CSS Styles

We've learned about the different CSS styles (selectors), how they are created, and where they are stored. The good news is that styles are applied in the same way whether they are stored internally or externally. However, the CSS Styles panel is used to apply class selector styles only. Let's take a closer look at applying these and other selectors (styles).

10.6.1.1 Applying and clearing class selector styles

Here are some ways to apply class selector styles to the selected text or object:

Click the Apply button in the CSS Styles panel.
Pick the style name from the menu using Text CSS Styles stylename.
Assign a class attribute by hand (or using the Quick Tag Editor) to an existing HTML tag. If you assign it a value of a matching a class selector, then the custom style will be applied.
Right-click (Windows) or Ctrl-click (Macintosh) on the Tag Selector to open the contextual menu and choose the style name from the Set Class submenu (see Figure 10-16). Select None from the pop-up submenu to clear a previously applied style.
Select CSS Styles stylename from the contextual menu in the Document window, as shown in Figure 10-17.

Figure 10-16 shows how to apply a class selector using the Tag Selector.

Figure 10-16. Using the Tag Selector to apply a class selector

Figure 10-17 shows how to use the contextual menu to apply a class selector.

Figure 10-17. Using the contextual menu to apply a class selector

If you apply a class selector style to a selection not contained in a block element, Dreamweaver automatically inserts a <span> tag to contain the class attribute, as shown in the following code:

<p>But this <span class="pgraph">text</span> isn't!</p>

If you apply a style to a document containing a single line of text that is not contained by an element other than the <body> element, the class is applied to the entire <body> element.

To remove a class selector, click anywhere inside text with that style applied and then select Text CSS Styles None or click the (none) style in the CSS Styles panel.

When clearing the style from a selection, the class property is removed from the tag. If the style is applied to a <span> tag, then the <span> tag is also removed. Clearing a style from a single object is not the same thing as deleting the style entirely.

10.6.1.2 Applying and clearing type selector and pseudo-selector styles

Recall that type selector styles redefine HTML tags. Therefore, they are not applied explicitly. Any type selector style you define is applied to all matching HTML tags.

Similarly, the pseudo-class selectors (a:link, a:visited, etc.) are automatically applied to any <a> tags containing an href attribute.

Because these selectors are applied automatically, the only way to eliminate their influence (i.e., clear them) is to delete the selectors themselves. The affected tags will refresh automatically.

10.6.1.3 Applying and clearing ID selector styles

The last type of CSS style we examined was the ID selector style.

Here's how to apply and clear an ID selector:

Assign an id attribute by hand (or by using the Quick Tag Editor) to an existing HTML tag. If you assign it a value of a matching ID selector, then the custom style will be applied. If you delete the id attribute, the style is effectively cleared.
Right-click (Windows) or Ctrl-click (Macintosh) on the Tag Selector to open the contextual menu and choose the style name to apply from the Set ID submenu(refer to Figure 10-6). Select None from this pop-up submenu to clear a previously applied style.