Section B.1. Creating Styles | Dreamweaver CS3: The Missing Manual

B.1. Creating Styles

You begin most CSS- related tasks in the CSS Styles panel, which is Dreamweaver's command center for creating styles. To open it, choose Window CSS Styles (or press Shift-F11).

Using Figure B-1 as a guide, here's how to find your way around the CSS Styles panel:

The All button at the top of the panel lists all internal and external styles for the currently open document. The other buttonCurrentlets you take a closer look at individual styles (Section B.1.1).

Tip: Clicking the minus (-) icon to the left of the style sheet collapses the list of styles, hiding them from view. (On a Mac, the button looks like a little triangle instead, but it does the same thing.)
An internal style sheet is indicated by <style> in the panel. In this example, there's one tag style (for the <body> tag).
External style sheets are listed by file name ( headlines.css ). The external style sheet's rules are listed below the file name ( p, h1, .celebrity , and so on). The first two styles are tag styles (notice that the names match various HTML tags), while the last five are class styles (note the period at the beginning of each name).
The Properties list in the bottom half of the panel lets you edit a style as described in Section B.1.1. The three buttons at the bottom-left of the panel (circled in Figure B-1) control how the property list is displayed.

Figure B-1. With the All button selected, the CSS Styles panel lists the names of all styles available to the current page, including external and internal style sheets. In this example, an internal style sheet contains a single style, and one external style sheetheadlines.csscontains seven styles.

B.1.1. Phase 1: Set Up the CSS Type

To create a new style, choose Text CSS Styles New. Or, on the CSS Styles panel, you can click the New Style button, or right-click anywhere in the panel and select New from the shortcut menu. The New CSS Rule dialog box appears (Figure B-2), where you begin 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 will automatically apply to each occurrence of the tag.

To create IDs, pseudo-classes, and descendent selectors, click Advanced. (And if you need help remembering what all these kinds of selectors do, then flip back to Chapter 3.)
Name . If you clicked the Class button, type a name for the new style. If you're in a desperate hurry, then you can leave out the period that goes at the beginning of every class style, since Dreamweaver adds it automatically when it puts the style in the style sheet.

Tip: 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). Or, if you're an old hand at HTML, just type the tag name without the brackets. When 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, including plain old tag and class styles.

Define in . Click "This document only" if you want the styles to apply only to the current Web page, creating an internal style sheet. 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 B.1.1), that style sheet's name appears in the pop-up menu, indicating that Dreamweaver will store the new style in that sheet. (See Chapter 2 for a review of internal and external style sheets.)

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, then 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. (Don't forget the .css on the end.)

Tip: If you'll be using this style sheet for all of the pages in your site, then 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 adds it.)

Figure B-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. It changes to Tag if you click the Tag button, or Selector if you're using the Advanced option.

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

B.1.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 (Figure B-3). Here you can click to choose which properties to add to your style, instead of typing them. Look, mano spelling errors!

Figure B-3. For ultimate formatting control, Dreamweaver lets you set 67 different Cascading Style Sheet properties from the CSS Rule Definition window. But it doesn't give you access to all the available CSS properties and, in some cases, Dreamweaver uses different names for CSS properties than are used in this book and in the CSS rules. Turn to Section B.1 for more details.

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.