Section B.4. Managing Styles

B.4. Managing Styles

Sometimes, instead of editing the properties of a style, you want to delete it and start over. Or you've come up with a way to better organize your Web site and you want to rename some styles according to your new system. Dreamweaver makes it easy to do both those things. It even lets you duplicate a style, so you can quickly create a new style that bears some similarities to one you've already built from scratch.

B.4.1. 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 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 (Window CSS Styles). Click the name of the style you wish to delete, and then click the Trash can at the bottom of the panel. You can also remove all of the styles in an internal style sheet (as well as the style sheet itself) by selecting the style sheetindicated by "<style>" in the CSS Styles panel (see Figure B-10)and clicking the Trash can. When you trash an external style sheet, you merely unlink it from the current document without actually deleting the .css file.

Figure B-10. Some CSS properties can be condensed into a shorthand version. For example, the values for the background image, background-repeat , background- color , and background-position properties can be combined using the background property like this: background: #FFF url(/books/2/835/1/html/2/images/bg.gif) norepeat left top;. Normally, Dreamweaver creates a style using each individual property name, rather than the shorthand version. You can change that from the CSS Style category of the Preferences window (choose Edit Preferences in Windows or Dreamweaver Preferences on the Mac).

---

Tip: 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 shortcut menu.

---

Unfortunately, deleting a class style doesn't delete any references to the style in the pages of your site. If you've created a style called .company and applied it throughout your site, and you then delete that style from the style sheet, then 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< span class="company" > The National Exasperator </ span >even though the text loses the styling. (You can use Dreamweaver's Find and Replace tool to locate and remove <span> tags with a particular class, or to locate a tag with a particular class and just remove the class attribute from the tag's HTML.)

B.4.2. Renaming a Class Style

While you have 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 doesnt 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 includes a handy tool to simplify this process.

To rename a class style:

1. In the Style menu (or Class menu) on the Property inspector (Figure B-6), choose Rename .

   The Rename Style window appears (Figure B-11).

   Figure B-11. The Rename Style tool is a fast and easy way to change the name of a class style even if you've already used the style hundreds of times throughout your site.

   

2. From the top menu, choose the name of the style you wish to rename .

   This menu lists all class styles available on the current page, including external and internal styles.

3. Type the new style name in the "New name" box .

   You must follow the same rules for naming class styles described in Section 3.1. But, just as when creating a new class, you don't need to precede the name with a periodDreamweaver takes care of that.

4. Click OK .

   If the style whose name you're changing is an internal style, Dreamweaver makes the change. Your job is complete.

   If the style belongs to an external style sheet, Dreamweaver warns you that other pages on the site may also use this style. To successfully rename the style, Dreamweaver must use its Find and Replace tool to search the site and update all pages that use the old style name. In that case, continue to step 5.

5. If you get cold feet, click Cancel to call off the name change, or click Yes to open the Find and Replace window, where you should click Replace All .

   One last warning appears, reminding you that this action can't be undone.

   ---

   Note: If you click No in the warning box that appears after step 4, then Dreamweaver still renames the style in the external style sheet, but doesn't update your pages.

   ---

6. Click Yes .

   Dreamweaver goes through each page of your site, dutifully updating the name of the style in each place it appears. This hidden gem is a great tool, and is particularly useful if you use the Property Inspector to set font colors, types, and sizes. In that case, you can use this feature to rename the non-descriptive class namesStyle1, Style2, and so onthat Dreamweaver starts you off with.

B.4.3. Duplicating a Style

Dreamweaver makes it easy to duplicate a CSS style, which is 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 (Window CSS Styles), right-click (Control-click) the name of the style you wish to duplicate, and then choose Duplicate from the shortcut menu.

The Duplicate CSS Rule dialog box appears (Figure B-12), 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.

Figure B-12. The Duplicate CSS Style dialog box looks and acts just like the New Rule box (Figure B-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 earlier in this appendix.