Section B.3. Editing Styles | Dreamweaver CS3: The Missing Manual

B.3. 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. In fact, one of Dreamweaver's greatest selling points is how easy it makes updating the formatting on a Web site.

Dreamweaver 8 provides many ways to edit styles:

FREQUENTLY ASKED QUESTION
When Formatting Disappears

Sometimes when I copy text from one Web page and paste it into another Web page, all the formatting disappears. What's going on ?

When you use Cascading Style Sheets, keep in mind that the actual style information is stored either in the <head> of the Web page (for internal style sheets) or in a separate CSS file (an external style sheet). If a page includes an internal style sheet, when you copy text, graphics, or other page elements, then Dreamweaver copies those elements and any class style definitions used by that content. When you paste the HTML into another page, the styles are written into the <head> of that page. This feature, new in Dreamweaver 8, can save you some time, but won't solve all of your woes. It doesn't, for example, copy any tag styles you've created or most advanced styles you might create (see Section 3.1). So if you copy and paste some text, say an <h1> tag styled with an h1 tag style, then the <h1> tag and its contents will paste into another page, but not the tag style.

In addition, if a page uses an external style sheet, then when you copy and paste text, the styles themselves don't go along for the ride.

When you copy a paragraph that has a class style applied to it and paste it into another document, the code in the paragraph is pasted ( p class="company ">, for instance), but the actual .company style, with all its formatting properties, is not.

The best solution is to use a common external style sheet for all pages on your site. That way, when you copy and paste text, all the pages share the same styles and formatting. So in the example above, if you copy a paragraph that includes a class style class="company" into another page that shares the same style sheet, then the paragraphs will look the same on both pages.

Select a style in the CSS Styles panel, and then click the Edit Style button to open the Rule Definition window (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.
Double-clicking the name of a style in the CSS panel also opens the Rule Definition window. This is a change from the previous version of Dreamweaver (MX 2004), which switched to Code view so you could edit the raw CSS code. You can resurrect that behavior, by opening the Preferences window (Ctrl+U [ -U]), clicking the CSS Styles category, and selecting the last button "Edit using Code View."
Right-click (Control-click) the name of a style in the CSS Styles panel and choose Edit from the shortcut menu, which also opens the Rule 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, and then use the Properties list (Section B.1.1) to edit the style's properties.

POWER USERS' CLINIC
A Time to Design

A Dreamweaver feature called Design Time style sheets lets you quickly "try out" different CSS style sheets while developing your Web page. Using the simple dialog box shown here, you can hide the (external) style sheets you've attached to a Web page and substitute in new ones.

Design Time style sheets come in handy when working on HTML that, later on, you intend to make part of a complete Web page. Dreamweaver Library items are a good example; this feature lets you create a chunk of HTML that you can use on any number of pages on your site (see Dreamweaver 8: The Missing Manual for instructions on how to use this feature). When you update the Library item, every page that uses it is updated. A time-saving feature, for sure, but since a Library item is only part of a page it doesn't include the <head> portion needed to either store styles or attach an external style sheet. So when designing a Library item, you're working in the dark (or at least, without any style). But using Design Time style sheets, you can access all the styles in an external style sheet and even preview the effects directly in Design view.

You'll also turn to this feature when working with Dreamweaver 8's new XML tools, which let you add an XSLT fragment to a complete Web pageessentially letting you convert XML (like you'd find in an RSS news feed) into a chunk of HTML. But to accurately design these components , you'll need to use Design Time style sheets.

By the way, Design Time works only with external style sheets. You can't use it to prevent Dreamweaver from displaying internal styles.

To apply a Design Time style sheet to your Web page, choose Text CSS Styles Design Time. The Design Time Style Sheets window appears. Click the top + button to select an external style sheet to display in Dreamweaver. Note that clicking this button doesnt attach the style sheet to the page; it merely selects a .css file to use when viewing the page 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.

B.3.1. Editing in the Properties Pane

The CSS Rule Definition window (Figure B-3) is a rather tedious way of editing CSS properties. It's easy to use, but the categories and menus may slow down experienced CSS folks. Dreamweaver 8 introduces a new toolthe Properties paneto streamline the process of editing styles. The Properties pane displays a selected style's currently defined properties, as well as a list of other not-yet set CSS properties.

Note: MX 2004 veterans : The Properties pane is nearly identical to the Rule Inspector which has been spruced up a little and moved into the CSS panel.

Select the style you wish to edit in the CSS Styles panel, and the Property pane displays CSS properties in one of three different views: a "set properties" view which displays only the properties that have been defined for the selected style (Figure B-8); a category view, which groups the different CSS properties into the same seven categories used in the Rule Definition window (Figure B-9, left); and a list view which provides an alphabetical listing of all CSS properties (Figure B-9, right). Clicking the view buttons at the bottom-left corner of the CSS styles panel switches between these three displays (circled in both figures).

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 ?

When you edit a style located in an external style sheet, Dreamweaver opens the .css filein 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 yet 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 Edit Undo command to undo edits to the file. To do so, you must have that file open in front of youbut 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 benefit, you can turn it off. Open the Preferences window by choosing Edit Preferences (Dreamweaver Preferences on the Mac). Select the CSS Styles category and turn off the "Open CSS files when modified box (see Figure B-10). Remember, though, if you turn this feature off, then you won't be able to use Edit Undo to undo edits you make to external style sheets.

Property names are listed on the left, and their values are on the right. Figure B-8 shows an example of a style for the <h1> tag that lists 10 properties (such as background-color , font-family ) and their corresponding settings (#FFFFCC, "Arial, Helvetica, sans-serif", and so on).

Tip: As you've read, CSS lets you use various shorthand methods for combining several CSS properties into a single property. You can turn on this feature in Dreamweaver as well, as described in Figure B-10.

To add a new property, click the Add Property link at the bottom of the list, and select the property name from the pop-up menu. You set (and can edit) 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 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 dashed for the border-top-style property shown in Figure B-8; and the familiar "browse for file" folder icon for properties that require a path to a file.

Figure B-8. The Properties pane provides a clear view of a style's properties. You can quickly see which CSS properties are used by the style, delete or edit them, and add a new property by selecting its name from the property menu.

The Properties pane is a great editing option if you have some experience typing your own CSS code, as you've learned throughout this book. Appendix A has a handy list of CSS properties. Also, Dreamweaver includes a built-in CSS reference so you can sharpen your CSS chops even further: choose Window Reference to open the Reference panel, and then select O'Reilly CSS Reference from the Book menu.

Note: The Properties pane can only edit styles. You can add and remove properties with it, but you can't create, delete, or rename styles using it. For those maneuvers, see Section B.1.

Even those who are not-so-experienced will find the Properties pane helpful. First, it's the best way to get a bird's-eye view of a style's properties. Second, for really basic editing such as changing the colors used in a style or assigning it a different font, the Properties pane is as fast as it gets.

To remove a property from a style, just delete its value in the right column. Dreamweaver not only removes the value, but the property name from the style sheet as well. In addition, you can right-click (Control-click) a property name and choose Delete from the shortcut menu, or click a property name followed by the trash can icon to banish it from your style sheet (see Figure B-8).

Figure B-9. The Properties pane's two other views aren't as streamlined or as easy to use as the "set properties" view pictured in Figure B-8. (In fact, they're a holdover from Dreamweaver MX 2004's Rule Inspector panel.) To add new properties in these views, type a value in the empty box to the right of the property name. At left, you can type in the empty box to the right of "background."