6.4 Manipulating Styles

As with anything in Dreamweaver, styles are easy enough to edit, duplicate, or delete; all you need is a map of the terrain.

6.4.1 Editing Styles

While building a Web site, you continually refine your designs. That chartreuse color you assigned to the background of your pages may have looked great at 2 a.m., but it loses something in the light of day.

POWER USERS' CLINIC A Time to Design A Dreamweaver feature called Design Time style sheets lets you "try on" different CSS sheets while developing your Web page in Dreamweaver—at design time. Using the simple dialog box shown here, you can hide the (external) style sheets you've attached to a Web page and try on new ones. Design Time style sheets come in handy when you use the Tip in Section 3.3.2 for dealing with Navigator 4. You can use this method to preview the page using the linked external style sheet, but hide the styles from the style sheet attached with the import method. It's a great way to get a glimpse of what your Netscape viewers will see. Design Time style sheets are also a great way to see how your Web pages would look with radically different styles—without actually altering the pages. Developers who use different style sheets for different Web browsers or different operating systems also use Design Time style sheets. This technique involves programming—using either JavaScript or one of the server-side languages discussed in Part 6 of this book—to attach a style sheet to a page based on a visitor's browser or operating system. To apply a Design Time style sheet to your Web page, choose TextCSS StylesDesign Time; the Design Time Style Sheets window appears. Click the top + button to select an external style sheet to display in Dreamweaver. Note that this doesn't attach the style sheet to the page; it merely selects a .css file to use when viewing inside Dreamweaver. To properly view your page with this new style sheet, you may need to get an attached external style sheet out of the way. To do that, use the bottom + button to add it to the Hide list. Design Time style sheets apply only when you're working in Dreamweaver. They have no effect on how the page looks in an actual Web browser. That's both the good news and the bad news. Although Dreamweaver lets you apply class styles that you take from a Design Time style sheet to your Web page, it doesn't actually attach the external style sheet to the page. You have to attach it yourself when design time is over, or else your visitors will never see your intended result. Note that this method only works with external style sheets; you can't use it to prevent Dreamweaver from displaying internal styles.

Fortunately, one of CSS's greatest selling points is how easy it makes updating the formatting on a Web site.

Although this section talks mostly about text styling, you can also use CSS styles to add background colors, background images, borders, and accurate positioning that can apply to images, table cells, and other page elements. For an example of a CSS style applied to an image, see the tutorial on Section 6.8.4.

Dreamweaver MX 2004 provides many ways to edit styles, some of which are new:

• Select a style in the CSS Styles panel (Figure 6-1) and click the Edit Style button to open the Style Definition window (Figure 6-3). (This is the same window you used when first creating the style.) Make your changes and then click OK to return to the document window. Dreamweaver reformats the page to reflect any changes you made to styles used in the current document.

• Right-click (Control-click) the name of a style in the CSS Styles panel and choose Edit from the contextual menu, which also opens the Style Definition Window. Make your changes to the style, and then click OK to return to the document window.

• Select a style to edit in the CSS Styles panel, then use the Rule inspector (Section 6.4.2) to edit the style's properties.

• Double-click the name of a style in the CSS Styles panel. If the style is part of an external style sheet, Dreamweaver opens the CSS file in Code view with the cursor at the first CSS property—ready for you to edit by hand. (You can edit internal styles the same way. Double-click an internal style on the CSS Styles panel, and the page changes to Split view—see Section 10.2—where you can hand-edit the code.)

FREQUENTLY ASKED QUESTION Help, My Styles Don't Work! I've just edited a CSS style, but the changes I made don't appear when I preview the page. Why? Dreamweaver MX 2004 introduced a new "feature" that often creates this kind of confusion. When you edit a style located in an external style sheet, Dreamweaver opens the .css file—in the background, where it then surreptitiously makes the change to the style. Unfortunately, the program doesn't save the file when it's done, so while the changes exist in the still-open .css file, the file safely saved on your hard drive doesn't contain the changes. Therefore, if you preview a page on your site, and merrily click away to see how the newly edited styles look on your site's pages, you'll be sadly disappointed. Those pages are loading the .css file on your hard drive; they don't have access to the open file in Dreamweaver. The method to this apparent madness: Dreamweaver is giving you a chance to undo changes you made to the external style sheet. Because the program hasn't closed the .css file, you can use the EditUndo command to undo edits to the file. To do so, you must have that file open in front of you—but where is it? Just pull it forward by choosing from the list of all open files at the bottom of the Window menu. If you find this arrangement more a nuisance than a feature, you can turn it off. Open the Preferences window by choosing EditPreferences (DreamweaverPreferences on the Mac). Select the CSS Styles category and turn off the "Open CSS files when modified" box. (Remember, if you turn this feature off, you won't be able to use EditUndo to undo edits you make to styles.)

6.4.2 Editing Styles with the Rule Inspector

The Style Definition window (Figure 6-3) can be a rather tedious way of editing CSS properties. It's easy to use, but the categories and menus may slow down experienced CSS users. Dreamweaver MX 2004 introduces a new tool—the Rule inspector—to streamline the process of editing styles. The Rule inspector, shown in Figure 6-6, presents all the CSS properties in a single, compact list.

To use the Rule inspector, first make sure the Tag inspector is open: choose Window Tag inspector or press F9. Next, select the style you wish to edit in the CSS Styles panel, which turns the Tag inspector into the Rule inspector. As you've probably figured out by now, the Rule inspector is just another face of the Tag inspector (Section 10.4).

The Tag inspector has two different views: a category view, which groups the different CSS properties into the same seven categories used in the Style Definition window (Figure 6-6, left); and a list view, which provides an alphabetical listing of all CSS properties (Figure 6-6, right).

So that you can instantly grasp what properties you've already defined for a particular style, Dreamweaver moves previously defined properties to the top of the list, highlighting the property names in blue and listing the property settings to the right.

The Rule inspector provides a fast way to edit style properties. You can view the properties either grouped by category (left) or as one long alphabetical list of properties (right).

Figure 6-6 shows an example for a class style called copyright. In the category view, two font properties float to the top of the Font category: font-size and color. In the list view, you can see that the style actually has settings for six different CSS properties set—border-top-color to text-align.

You set the value of a particular property in the space to the right of the property name. Most of the time, you don't have to type in the value. Dreamweaver provides the tools you're likely to need for each property: the ubiquitous color box (Section 1.3.3) for any property that requires a color, like font color; a pop-up menu for properties that have a limited list of possible values, like the Text-align property shown in Figure 6-6; and the familiar "browse for file" folder icon for properties that require a path to a file.

Some other properties, however, require you to know enough CSS to enter them manually, in the correct format. That's what makes the Rule inspector a good advanced option for experienced CSS gurus. (If your goal is to become one, you can learn about the different CSS properties starting on Section 6.7. Dreamweaver includes a built-in CSS reference so you can sharpen your knowledge of this exciting technology, as discussed on Section 10.5.)

Even not-so-experienced users can find the Rule inspector helpful, too. First, it's the best way to get a bird's-eye view of a style's properties. The list view is especially helpful in this regard, since all of the defined properties are listed at the top of the window. Second, for really basic editing such as changing the colors used in a style or assigning it a different font, the Rule inspector is as fast as it gets.

6.4.3 Deleting a Style

At some point, you may find you've created a style that you don't need after all. Maybe you redefined the HTML <code> tag, for example, and realize you haven't even used the tag in your site. There's no need to keep it around taking up precious space in the style sheet.

To delete a style, make sure the CSS Styles panel is open (WindowCSS Styles). Click the name of the style you wish to delete, and then click the Trash can at the bottom of the panel (Figure 6-1). If you "trash" an external style sheet, you merely unlink it from the current document without actually deleting the .css file.

A faster way to delete a style is to right-click (Control-click) the name of the style in the CSS Styles panel and choose Delete from the contextual menu.

Unfortunately, deleting a class style doesn't delete any references to the style in the pages of your site. For example, if you've created a style called .company and applied it throughout your site, and you then delete that style from the style sheet, Dreamweaver doesn't remove the <span> tags or class properties that refer to the style. Your pages will still be littered with orphaned code like this?lt;span class="company">The National Exasperater</span>—even though the text loses the styling. (See how to solve this problem using Dreamweaver's powerful Find and Replace tool on Section 19.3.)

6.4.4 Renaming a Class Style

While there are many ways to change the name of a style in a style sheet (open the .css file in Code view and edit the name, for example), just changing the name doesn't do much good if you've already applied a class style throughout your site. The old name still appears in each place you used it.

What you really need to do is rename the style and then perform a find-and-replace operation to change the name wherever it appears in your site. Dreamweaver MX 2004 introduces a handy new tool to simplify this process.

To rename a class style:

6.4.5 Duplicating a Style

Dreamweaver makes it easy to duplicate a CSS style, which can be handy when you've created, say, an HTML tag style, and now decide you'd rather make it a class style. Or you may want to use the formatting options from one style as a starting-off point for a new style. Either way, you start by duplicating an existing style.

You can duplicate a style in two ways. The easiest method is to open the CSS Styles panel (WindowCSS Styles), right-click (Control-click) the name of the style you wish to duplicate, and then choose Duplicate from the contextual menu.

The Duplicate CSS Style window appears (Figure 6-8), where you can give the duplicated style a new name, reassign its Type setting, use the "Define in" menu to move it from an internal to an external style sheet, and so on.

The Duplicate CSS Style dialog box looks and acts just like the New Style box (Figure 6-2). You can select a new style type, name it, and add it to an external or internal style sheet. The only difference is that the duplicated style retains all of the CSS properties of the original style.

When you click OK, Dreamweaver adds the duplicate style to the page or external style sheet. You can then edit the new style just as you would any other, as described on Section 6.4.

The second method involves the Edit Style Sheet window: choose TextCSS Styles Manage Styles, or choose Manage Styles from either the Style or Class menu on the Property inspector.

Either way, the Edit Style Sheet window appears (Figure 6-9, left). This window lists all external style sheets attached to the page, and displays "<style>" if there is an internal style sheet.

Double-click the name of the external style sheet to open a window displaying all the styles in that style sheet (Figure 6-9, right). If the page has only an internal style sheet, you'll see a window that lists all styles defined internally, much like that at right in Figure 6-9.

The Edit Style Sheet window (left) lists external and internal style sheets. Double-click a style sheet to open its edit window (right). If you click Attach here, you can attach external style sheets to an external style sheet. This perfectly valid CSS technique lets a Web page link to a single external style sheet that can, in turn, reference any number of other style sheets.

Select a style from the list, then click Duplicate. The Duplicate CSS Style window appears, as shown in Figure 6-8. At this point, proceed exactly as described above.

This method requires a few more steps than using the CSS Styles panel. But it lets you duplicate multiple styles quickly—when, for example, you've grasped the concept of contextual selectors (Section 6.6.2) and have decided to convert all the class styles you created to contextual selectors.