You begin most CSS- related tasks in the CSS Styles panel, which is the command center for creating styles (see Figure 6-1). To open it, choose Window CSS Styles (or press Shift+F11).
To create a new style, click the New Style button on the CSS Styles panel (see Figure 6-1); right-click anywhere in the CSS Styles panel, and select New from the menu that appears. Or choose Text CSS Styles New . The New CSS Rule dialog box appears (Figure 6-2), where you begin the process of creating your new style:
Selector Type . Click the appropriate radio button for the kind of style you're creating: Class (to create your own style from scratch) or Tag (to create an HTML tag style that Dreamweaver automatically applies to each occurrence of the tag). See the previous section ("Types of Styles") for a discussion of these two types.
The third type offered here, Advanced, lets you create advanced style types such as IDs, pseudo-classes, and descendent selectors. (These are discussed beginning on Section 6.6.)
Name . If you clicked the Class button, type a name for the new style. All class styles begin with a period, according to standard Cascading Style Sheet convention.
Class style names must begin with a letter, too, and can contain only letters and numbers . Dreamweaver lets you know if you use any invalid characters for the name.
If you chose Tag instead, select the HTML tag you want to redefine from the Tag pop-up menu (which appears when you click the Tag radio button).
If you clicked the Advanced button, Dreamweaver lets you type any valid CSS selector type in the Selector field (see Section 6.6.1). You'll use this feature for some advanced CSS tricks, but you can also use it just to create a tag or class style.
Define in . Click "This document only" if you want the styles to apply only to the current Web page (creating an internal style sheet, as described on Section 6.1.2). To create a new external style sheet, choose New Style Sheet File from the "Define in" pop-up menu. This option not only creates a new external CSS file (which you can save anywhere in your site folder), but adds the necessary code in the current document to link it to that file.
If you've previously linked this document to an external style sheet (see Section 6.3), that style sheet's name appears in the pop-up menu, indicating that Dreamweaver is going to store the new style in this style sheet file.
If you indicated that you want to create an external style sheet, clicking OK makes a Save Style Sheet As dialog box appear. Navigate to your site's folder and type a name for the new external CSS file. Just as HTML files end in .html, CSS files end in .css.
No matter what "Define in" option you selected, clicking OK eventually brings you to the CSS Rule Definition window.
The CSS Rule Definition window provides access to all of the formatting options available to you and your Web page text and graphics (see Figure 6-3). A blow-by-blow description of these various options begins on Section 6.7.
Once you've defined the style, click OK at the bottom of the Rule Definition window. Dreamweaver adds the style to the specified style sheet, and displays it in the CSS Styles panel (Figure 6-1).
The real trick to creating a style is mastering all of the different properties available, such as borders, margins, and background colors, and then learning which ones work reliably in the different browsers.