9. Managing Styles
In This Chapter
Creating Rules from Inline Styles
Creating a New External Style Sheet
Experimenting with CSS Enable/Disable
Using Design-Time Style Sheets
The two previous chapters covered CSS and how it works with your webpages. After you’ve gotten the hang of CSS, though, you may find that you’re spending too much time trying to figure out which styles affect which sections of the page. Or maybe you’ll find that you’re trying to keep track of where your styles are (inline? internal? external?) and in what order they apply to your site. Or maybe it’ll be that you are testing styles but don’t want to change your entire site yet.
No matter what your particular issue, Dreamweaver has made it simple and straightforward to manage moving, duplicating, debugging, and deleting styles.
Renaming Styles
It’s a good idea to give styles a descriptive name of your choosing. You may want to rename a style because your site has changed, or maybe you just don’t like the style names in the default CSS layouts. Whatever the reason, they should have meaningful names.
To rename a style for a class
1. In the HTML tab of the Property inspector, choose Rename from the Class pop-up menu 
. The Rename Style dialog appears 
.
Choose Rename from the Class pop-up menu to give a style a new name.
Type the new name in the field to rename your style.
2. If the class you want to rename isn’t already selected, use the pop-up menu to choose it. Type a name in the New name field, and click OK.
3. If the class you chose is used in multiple places or it’s in an external style sheet that can affect multiple pages, you’ll be prompted as to whether you want to make this change everywhere 
. If you want this (you usually will), click Yes.
If you want, Dreamweaver will update the name everywhere in your site after you rename a style.
If you click Yes, the Find and Replace dialog appears, with the parameters you need to search for and replace already filled in, and with the scope of the search set for your entire site. See the section “Finding and Replacing with a Specific Tag” in Chapter 4 to learn more about using this dialog.
If you click No, the Find and Replace dialog does not appear, and you will need to make any updates manually.
Tip
It’s also possible to double-click a class name in the CSS Designer panel and manually rename the style, but that doesn’t change all the places that use that style.
Deleting Styles
When you delete a rule from a style sheet, the formatting of any element using that rule immediately changes.
To delete a style
1. Open a document, and in the CSS Designer panel, choose the selector to delete.
2. Click the Remove selector button at the top right of the pane. Note that you don’t have to click OK or accept anything—it just disappears immediately.
Tip
Even though you’ve deleted the selector, any references to it will still exist in the document. That is, classes and ids aren’t removed from your pages when you delete rules that apply to those classes and ids.
Creating Rules from Inline Styles
Inline styles (first covered back in Chapter 7) are a handy way to test properties to see if using a particular bit of CSS does what you want it to do. However, remember that the main power of CSS is being able to apply it in many places in a document and many documents in a site—and if you’re only applying it to a single tag, you’re missing out on all that power. So while inline styles are great for quick tests, once your CSS has passed the test, it’s time to turn it into a rule.
To create a rule from an inline style
1. In your document, click anywhere within the area where the inline style is applied.
2. Choose Format > CSS Styles > Convert Inline CSS to Rule .
One way to convert the style to a rule is with Convert Inline CSS to Rule, found under the Format menu.
or
Right-click and choose CSS Styles > Convert Inline CSS to Rule .
Convert Inline CSS to Rule is also found in the context menu.
The Convert Inline CSS dialog appears .
The Convert Inline CSS dialog lets you set all the options for your new rule.
3. The first choice in that dialog is what type of rule you want to end up with 
:
A new CSS class, where you get to choose the class name.
A rule that applies to all tags of the given type; that is, if the inline style is applied to a <p> (paragraph) tag, you can apply that style to all paragraphs.
A new CSS selector, where the default is a rule based on the location of the inline style.
You can make a new class, a new selector, or a new rule that applies to all instances of a certain tag.
The last two are context-sensitive, so your defaults change depending on your inline style selection.
4. Next, you have a choice of creating the new rule in an external style sheet or in the head of the current document. Any currently linked external style sheets will be in the pop-up menu. If you don’t have any external style sheets, you can either create one here or put the new rule into the head of the current document (you’ll see how to drag the internal rule to an external style sheet later in the chapter). Choose an option, click OK, and your new rule will be created.
Tip
Dreamweaver CS5 added the ability to create a new external style sheet from the Convert Inline CSS dialog. If you want your new rule to be in a new external style sheet, you can either:
Follow the preceding steps to create a new rule, and then in the Convert Inline CSS dialog, enter a name for your new file. A dialog appears telling you it doesn’t exist and asking if you want to create it. If you do, click Yes and your new CSS file is created (containing your new CSS rule) and attached to the HTML page.
or
Follow the steps in the next task, “Creating a New External Style Sheet,” and then use the steps in this task to put the new rule into that style sheet.
Creating a New External Style Sheet
Up to now, we’ve covered how to create internal styles, but we also mentioned that internal styles may not always be the right choice. Here’s how to create a new external style sheet from scratch.
To create a new unattached external style sheet
1. Choose File > New. The New Document dialog appears .
Dreamweaver’s by-now-familiar New Document Dialog.
2. In the New Document dialog, select the Blank Page category, select CSS for the page type, and click Create. A new blank style sheet opens in Code view . Save this file with a name that ends in .css.
A blank CSS document, ready for you to add your rules.
Tip
An unattached style sheet needs to be attached in order to be useful. That’s covered in the next task, “Attaching a Style Sheet.”
To create a new attached external style sheet
1. In the Sources pane of the CSS Designer panel, click the Add CSS Source button and choose Create A New CSS File . The Create a New CSS File dialog appears .
You can add an attached external style sheet directly from the CSS Designer panel.
Enter a new file name and you’re done.
2. In the dialog, enter a new file name that ends in .css, and click OK. Your new blank file now exists and is attached to the webpage.
Tip
If you use the name of an existing file, you’ll be warned that Dreamweaver will erase the contents of that file.
Attaching a Style Sheet
It doesn’t do you any good to create a style sheet if your webpages don’t know about it. For a webpage to use an external style sheet, that style sheet must be attached to the webpage.
To attach a style sheet
1. In the Sources pane of the CSS Designer panel, click the Add CSS Source button and choose Attach Existing CSS File .
There are at least two ways to attach a style sheet.
or
From the HTML tab of the Property inspector, choose Attach Style Sheet from the Class pop-up menu (see 
in “Renaming Styles”).
2. The Attach Existing CSS File dialog appears . Click the Browse button to bring up the Select Style Sheet File dialog . Navigate to an existing style sheet, select it, and click OK (Open).
Choose which style sheet you want to attach to your webpage and how you want to attach it.
Choose which style sheet file to attach by browsing for it.
3. Back in the Attach Existing CSS File dialog, select Add as Link if it isn’t already chosen, and click OK to attach the style sheet. If your style sheet includes any rules that affect the active document, you’ll see those changes reflected immediately.
Tip
Take a look at the CSS Designer panel, where you’ll notice that your style sheet is now included and all of its properties can be viewed.
Tip
You’re offered a choice of using Link or Import to attach your style sheet. Each has its advantages: Link, the default choice, works in more browsers, whereas Import allows you to nest style sheets (that is, you can attach a style sheet using Import, and then that style sheet can include an import of another style sheet, and so on).
Tip
You can use both Link and Import in the same document. That’s a handy way to use two style sheets, where the link attaches a bare-bones style sheet and the import attaches a more complex style sheet that very old browsers (such as Netscape 4) can’t handle.
Dragging and Dropping Styles
If you’ve found all the methods so far for dealing with style management to be somewhat complicated, then here’s what you’ve been wishing you could do: drag and drop styles.
Moving styles inside a document
As mentioned in the Chapter 7 sidebar “External, Internal, and Inline: Look Ma, It’s the Cascade,” when there’s a style rule conflict, the physical location of the rules determines which one takes precedence. If you have two rules that conflict inside a document (either a webpage or a style sheet) and you want the one that’s currently being overridden to dominate, all you have to do is drag that rule below the other.
To move a style inside a document
1. Open the webpage or style sheet that contains the style (or styles) you want to move. In the CSS Designer panel, select the selectors that you want to move, and drag them to their new location . A black line appears showing where the selectors will be relocated.
You can see which styles you’re dragging while you’re dragging them. Here, we’re moving the two .content selectors above header.
2. When you’re happy with the new location, release the mouse button, and Dreamweaver moves the selectors for you.
Moving styles from one document to another
Not only can you move styles inside a document, but you can also move them from document to document—whether the documents are style sheets or webpages.
To move a style from one document to another
1. Open a webpage that either links to two style sheets or that contains the internal style (or styles) and also links to an external style sheet. In the CSS Designer panel, make sure that both files are displayed (if no external style sheet is displayed, follow the directions in “Attaching a Style Sheet”). Choose the selectors that you want to move, and drag them to their new location .
To move a selector to another style sheet, drag the selector to the new document.
2. When you’re happy with the new location, release the mouse button, and Dreamweaver moves the rules for you.
Tip
If you want to copy a style rule (that is, you want it to end up in both the original document and the target document), hold down the Ctrl (Option) key while dragging the rules.
Tip
If you’re moving a style rule into a document that already contains a rule with that name, you’ll get a warning dialog .
If you’re moving a rule that might cause a collision, Dreamweaver warns you about the problem.
Tip
This is the simplest way to move styles from an internal style sheet to an external style sheet. You can also move styles by selecting the desired CSS rules in Code view and then choosing Format > CSS Styles > Move CSS Rules.
Using CSS Inspection
Laying out pages with CSS can be frustrating because it can be difficult to tell which elements are where and why. Thankfully, Dreamweaver has a few clever features that make creating CSS-based layouts much simpler. CSS inspection, added in CS5, is one of the handy ways to tell just what’s going on in a selected area.
CSS inspection works with Live view mode to visually display the box model for an element. Hover over an element on your page, and it displays with an aqua background, yellow margins, lavender padding, and gray borders . But that’s not all—as you hover over various parts of your document, the CSS Designer panel dynamically updates to display the rules currently in effect.
Inspecting an element shows the margins, padding, and borders.
Turning on Inspect mode
Click the Live View button and then the Inspect button in the Document toolbar to enable both CSS inspection and Live view .
Click the Live View button, and the Inspect Mode button appears.
or
Choose View > Inspect to enable both CSS inspection and Live view.
or
Press Alt-Shift-F11 (Opt-Shift-F11) to enable both CSS inspection and Live view.
or
While in Live view mode, right-click the document and choose Inspect from the context menu .
When in Live view, you can inspect any element by right-clicking it.
Modifying styles with CSS inspection
1. While in Inspect mode, hover over any section of your document to display the box model for that element.
2. If you have a problem with how an element displays, click the element, freezing Inspect mode. When CSS inspection is frozen, the colors remain visible and don’t change when you move the cursor.
3. In the CSS Designer panel, change a rule, and the colored borders around the element update to match your change.
4. Click anywhere in your document to get rid of the colors.
Tip
To leave both Inspect mode and Live view, just click the Live View button. You can’t be in Inspect mode if you aren’t also in Live view.
Using the Visual Aids
If you’ve tried CSS Inspection and wished you could apply it to an entire page, you want what Dreamweaver refers to as visual aids.
shows our example CSS-based page with all visual aids turned off, which is fine. But if we had a problem, it would be difficult to tell where each div begins and ends. That’s where the visual aids shine. To see your options, choose View > Visual Aids and then select any of the submenu options .
Here’s our standard page.
Here’s the Visual Aids menu via the menu bar.
To turn each visual aid on or off, choose it from the menu to toggle its check mark, or you can choose Hide All (Ctrl-Shift-I or Cmd-Shift-I) to turn them all off temporarily. For day-to-day use, we keep CSS Layout Backgrounds turned off and CSS Layout Box Model and CSS Layout Outlines turned on.
Here’s a rundown of the CSS-related items in these menus:
CSS Layout Backgrounds: Put on your sunglasses and turn on CSS Layout Backgrounds . With this aid, Dreamweaver assigns a different background color for every layout block. If you’ve already set a background color, that will go away, as will background images—note that you can see the header logo, but you can’t see the header background color.
CSS layout backgrounds are gaudy but useful.
Dreamweaver’s documentation describes the color choices as “visually distinctive,” but we prefer to not beat around the bush: we just call them loud and bright. Sorry, but there’s no way to change the color choices. On the other hand, the garishness makes it very clear which div is which.
CSS Layout Box Model: You’ve seen the Layout Box Model aid used previously. When enabled, it shows just the selected element, including its margin, borders, and padding. Here, the a tag has varying amounts of padding on each side. When this visual aid is enabled, each is shown visually on the document along with the dimensions of the element.
The CSS Layout Box Model option shows you the exact limits of the currently selected element.
CSS Layout Outlines: The CSS Layout Outlines option simply puts a dashed line around the border of each layout block 
. It can be tricky to see what your borders are set to when this is on, and you should also keep in mind that the dashed line includes the padding but excludes the margins.
CSS layout outlines give you a subtle way of telling your elements apart.
Experimenting with CSS Enable/Disable
Another way to debug CSS is to enable and disable rules. Adobe makes this easy to do with CSS Enable/Disable, which is available on the CSS Designer panel.
To use CSS Enable/Disable
1. In the Properties pane of the CSS Designer panel, move your cursor over a property name. You should see a gray Disable CSS Property icon appear over to the right (it looks like the universal sign for “No”: the circle with the diagonal slash through it) . Click the icon, which will turn it black.
Hover over a property, and the Disable CSS Property icon appears.
2. If your document is open in Design view, Dreamweaver displays the page without that rule.
3. To re-enable a disabled rule, click the black Disable CSS Property icon in the Properties pane .
To re-enable a property, simply toggle the icon.
If you select a property or disable a property from the Summary pane, the Rules and Properties panes update to show the affected rule.
Tip
Disabled rules aren’t only disabled within Dreamweaver. If you disable a rule, save the file, and then upload your changes to the live server, the rule stays disabled until you enable it again. If you want similar functionality that only applies while testing, use design-time style sheets (described in the next task) instead.
Using Design-Time Style Sheets
It’s common when working with CSS-based layouts to want something to display in a particular way while you’re designing, but only while you’re designing—that is, during design time. You can tell Dreamweaver to use certain style sheets only at design time, and even to turn off certain style sheets only at design time.
As with the previous visual aids, you wouldn’t want your real website to look like that, but it’s handy while trying to do those last few tweaks or track down a problem. If you want something that Dreamweaver’s built-in visual aids don’t provide, design-time style sheets allow you to create your own.
To show a design-time style sheet
1. Create and save a new style sheet containing the style rules that should display only inside Dreamweaver. shows an example that contains two simple rules: p is set to display:block, and h2 gets a background color of orange. See the “CSS Layout Blocks” sidebar for an explanation of why you’d want to modify the p tag.
This very simple style sheet gives you extra information in Dreamweaver.
2. To choose a design-time style sheet, choose Format > CSS Styles > Design-time . The Design-Time Style Sheets dialog appears .
Design-time style sheets can be chosen from the Format menu.
The Design-Time Style Sheets dialog does the heavy lifting.
3. To add a style sheet that shows only at design time, click the upper plus button. The Select File dialog appears . Navigate to your new style sheet, choose it, and click OK (Open).
The Select File dialog lets you choose your design-time style sheet.
4. Back in the Design-Time Style Sheets dialog, your new style sheet is now listed next to “Show only at design time.” If it’s correct, click OK.
5. The webpage now appears with some slight changes : the h2 title has an orange background, and paragraphs can be identified using the CSS Layout Box Model visual aid. If we use the CSS Layout Backgrounds visual aid 
, paragraphs are now clearly distinct from other elements on the page.
Now the h1 is all lit up.
Paragraphs are delineated when the background visual aid is used.
To hide a style sheet at design time
Follow steps 2–4 from “To show a design-time style sheet,” but click the lower plus button instead. Select a style sheet to hide, and click OK.
In 
, the main style sheet for the page has been hidden. This allows you to see the page without the effect of styles or to see the page with some styles but not others. This can be a big help when trying to track down CSS-related issues.
Style sheets can also be hidden, as shown on this plain page.
To remove a design-time style sheet
1. Bring up the Design-Time Style Sheets dialog, as described earlier. Select the style sheet to remove, and click the minus button above the style sheet name in either box of the dialog. If you have multiple style sheets to remove, continue to delete them in this way.
2. Click OK, and your webpage displays closer to the way it will appear on the web.
Tip
When used in conjunction with Dreamweaver’s CSS layout blocks, design-time style sheets are an extremely powerful tool.
Tip
Despite how it looks, your document is not actually being changed—only the way the page is displayed is being changed. Design-time style sheets are not really added to or removed from your webpage: Dreamweaver handles it all internally.
Tip
It’s worth noting that when you remove design-time style sheets from your document, you’re not actually deleting the style sheet—you’re just removing the relationship between your page and the style sheet.