Section 6.2. Creating Styles | Dreamweaver 8[c] The Missing Manual

6.2. Creating Styles

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).

Note: Dreamweaver 8 introduces significant changes to how you create and use styles. The CSS Styles panel has two views ("All" as shown in Figure 6-1, and "Current," described on Section 6.5). It also incorporates a Properties list with which you can quickly edit CSS styles. (This was called the "Rule Inspector" in Dreamweaver MX 2004.)

Figure 6-1. With the "All" button selected, the CSS Styles panel lists the names of all styles available to the current page, including those in both external and internal style sheets. In this example, one external style sheetheadlines.csscontains seven styles. The first two styles are tag styles (notice that the names match various HTML tags), while the next five are class styles (note the period at the beginning). There's also one tag style defined in an internal style sheetthe one listed below "<style>." Click the minus () icon (arrow on Mac) to the left of the style sheet to collapse the list of styles, hiding them from view. The "Properties" list in the bottom half of the panel lets you edit a style as described on Section 6.4.2; the three buttons at the bottom left of the panel (circled) control how the property list is displayed.

6.2.1. Phase 1: Set Up the CSS Type

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.

Tip: If you're in a desperate hurry, you can leave the period out. Dreamweaver adds it automatically when it puts the style in the style sheet.

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).

Tip: If you're an HTML guru, you may find it faster to skip the Tag pop-up menu and just type the tag (minus the brackets) in the Name box. For example, if you want to create a style for all unordered(bulleted) lists, type ul .

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.

Figure 6-2. In the New CSS Rule dialog box, you choose a type of style and give it a name. The label next to the naming box changes depending on the type of style you choose. In this example, since Class is selected, the Name label appears; if you choose the Tag option, it changes to Tag (or Selector, if you're using the Advanced option).

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.

Tip: If you create a bunch of internal styles in a particular page and later realize you'd like to turn them into an external style sheet that you can use in other pages, you're in luck. Dreamweaver has a command for this very task. Open the page containing the internal styles you want to reuse and choose File Export Export CSS Styles. A dialog box opens, letting you save the file as an external style sheet. Dont forget to add the. css extension to the end of the file name.

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.

Tip: If you'll be using this style sheet for all of the pages in your site, you may want to save it in the root folder of your site, or in a folder specifically dedicated to style sheets, and give it a general name like site_styles.css or global.css . (You don't have to type the .css file name extension, by the way. In this case, Dreamweaver add sit.)

No matter what "Define in" option you selected, clicking OK eventually brings you to the CSS Rule Definition window.

6.2.2. Phase 2: Defining the Style

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.

Figure 6-3. For ultimate formatting control, Dreamweaver lets you set 67 different Cascading Style Sheet properties from the CSS Rule Definition window. To learn about these options, see page192.

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.