An Overview of CSS in Dreamweaver 8

CSS implementation in this version of Macromedia Dreamweaver is to advanced CSS developers what the previous version provided to beginners. Thankfully, CSS beginners have not been left behind. In this article, I'll take you through all the new CSS features, tools, and user interface changes in Dreamweaver 8. I've provided some sample files to help demonstrate what I cover in this article. Take a moment to download the sample files below, unzip them, and open the csstest.htm file in Dreamweaver 8.

Note: If you are still using Dreamweaver MX 2004 and not Dreamweaver 8, please see the article I wrote for the previous version, An Overview of CSS in Dreamweaver MX 2004.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8 -    Try   Buy

Tutorials and sample files: dw8_css_samples.zip (ZIP, 2K)

User Interface Changes

Dreamweaver 8 retains much of the CSS-specific user interface elements introduced in Dreamweaver MX 2004. In fact, the MX 2004 interface choices are so important to this version's workflow that I am including a section specifically describing the interface elements that remain the same. The changes in this version build off the existing interface, incorporating enhancements intended to streamline user workflow. Property Inspector The Property inspector sees only one change: the introduction of the CSS/Edit CSS button. This button gives the developer quick access to the pertinent definition in the CSS Styles panel. If the CSS Styles panel is already open, the CSS button is dimmed. The screen shot illustrates that I selected a paragraph tag that had been styled, but since the CSS Styles panel was already open to that style, the CSS button is disabled.

Figure 1. The Property inspector in Dreamweaver 8 with the CSS button dimmed because the CSS Styles panel is already open to the selected style

CSS Styles Panel

The CSS Styles panel has seen some interesting changes, and these changes will be of special interest to developers who use an external CSS editor.

The first change is very subtle: The panel grouping, which includes the CSS Styles panel and the Layers panel, is called CSS. As shown in Figure 2, this change is very subtle, but will improve a user's ability to find the pertinent panel group quickly.

Figure 2. The panel group has been renamed CSS to improve usability

Note: When you collapse the CSS panel group as shown in Figure 2, clicking the CSS button in the Property inspector will open the CSS Styles panel. So, users should always be able to find this panel group.

Once the CSS Styles panel is open, the changes for Dreamweaver 8 become much more evident, and users face possible confusion.

The CSS Styles panel has two modes: All and Current. I actually find this nomenclature confusing, although it may only be confusing because it is so simple. The All mode displays a listing of declarations affecting the entire page-essentially "all" of the declarations. The Current mode displays the CSS declarations affecting the current element. See? There is no reason for confusion!

Current Mode

While in Current mode, the CSS Styles panel includes the following displays: Summary for Selection, Rules, and Properties. Figure 3 illustrates what I see with my insertion point in a paragraph that has been redefined to display blue in Geneva, 12 pixels.

Figure 3. The CSS Styles panel in Current mode with the insertion point in a paragraph that has been redefined to display blue in Geneva, 12 pixels

The Summary category lists only those attributes affecting the appearance of the selection (in this case, the paragraph currently selected). If I click within another paragraph assigned a class style called hilite_text, the summary category in the CSS Styles panel shows the new color defined by that class style (#99FF66) as shown in Figure 4 rather than the color defined by the redefinition of the paragraph tag (#0000FF).

Figure 4. The Summary, Rules and Properties categories of the CSS Styles panel showing info for the hilite_text style class

The Rules category displays the cascade of rules affecting the current selection. Refer to Figure 4 for an illustration of this. In Figure 4, the first in the cascade is the styling defined in the body tag. The attributes defined in that rule are contradicted by rules "closer" to the selection, so those attributes are not displayed in the summary section. In CSS terms, this "closeness" is known as specificity. You can learn more about specificity on the W3C site. The attributes set by the redefinition of the paragraph tag are next in the cascade, but only the font-family and font-size attributes affect the
current selection. The final rule is the hilite_text class style, which only defines the color of the text.

There's a nifty alternate display, available by clicking the inner button in the Rules section. This About category displays useful information about the currently selected property, as shown in Figure 5. The property selected is the color property, as the About category heading indicates. The About category indicates which rule houses the specific property, and where that rule is defined.

Figure 5. The About category in the Current mode showing which rule houses the specific property, and where that rule is defined

That brings me to the Properties category of the CSS Styles panel. Click any property in the Summary category or click a rule in the Rules category, and the properties defined in the corresponding rule will display in the Properties category. The Properties category will also indicate which properties are affecting the selection: any properties that contradict and that are further up the cascade ladder will show a line through the property name. Try this by selecting the word "highlighted" on the first line of the csstest.htm file and then select the <body< tag in the Rules category. You will notice in the Properties category that font-family and font-size both have lines through them because the properties defined for font-family and font size in the <body< tag are contradicted by the properties for font-family and font-size defined in the tag. Properties in the <p< tag override rules in the <body< tag because they are "closer" to the highlight selection.

Note: You will create the csstest.html file later in this article, but you can follow along with the csstest.html file in the sample files for now.

The Properties category is something of the meat-and-potatoes of the panel. Not only can you edit the details of any property already defined (for example, changing the color property defined in .hilite_text from #99FF66 to another color is as simple as clicking the color box or typing a new color), you can also add a property to that rule. Clicking the Add Property link provides a different-to-Dreamweaver method of defining CSS styles, but I will detail that in the User Workflow section.

All Mode

The All mode of the CSS Styles panel shows all of the rules available to the page, whether those rules are defined within the head of the page or in a separate style sheet linked or imported from the page. As illustrated by Figure 6, the rules are separated according to where they are defined: rules defined within the head of the document appear under <style< while rules defined in a style sheet appear under the style sheet name.

Note: Inline styles - styles defined within the tag itself - do not appear in the All mode, but they do appear when appropriate in the Current mode.

Figure 6. The CSS Styles panel in All mode showing rules separated according to where they are defined

In addition to the listing of rules in the All Rules category, there is also a Properties sheet that performs the same as the one in Current mode. This mode seems familiar to the CSS Styles panel in Dreamweaver MX 2004, in that it displays and organizes the rules available to the page. The difference (a very welcome one) is that the Properties sheet allows you to see the properties of any selected rule, change any property, and add a property to the rule. Gone are the days of wishing the panel was 500 pixels wide to see all the properties!

Properties Sheet

The Properties sheet deserves its own section because it is so powerful. As I have mentioned, it is available for both All and Current modes. Astute Dreamweaver MX 2004 users will notice the similarities between it and the Relevant CSS panel (which it replaces). The power and flexibility of this user interface element will gradually sink in as you use Dreamweaver 8, and I will spend more time talking about how to use it in a workflow. For now, though, let me point out the buttons in the lower left corner.

Figure 7. The right button of the properties sheet shows only the properties that are set in the current document rather than all properties that can be set

For the screen shots I have provided in this section, I have selected the right button, which shows only the set properties. The other two buttons show all of the properties that CAN be set, listing them as grouped by category (left button) or listed alphabetically (middle button).

In the next section, I will review all the new features for visual display of CSS within Dreamweaver 8.

Visual Display in Dreamweaver Design View

In this section, you can find all of the changes that will make advanced CSS developers weep with joy. There are new tools to help you see styles display as well as improvements in the style properties Dreamweaver renders.

Tools for CSS Display

The first group of display choices allow you to view or create a page that has different style sheets supporting different media types. You can select View > Style Rendering, and then choose a different media type to design or test the styles. In case you are wondering (and I know some of you are!), the easiest way to integrate multiple media types in a website is to define a separate style sheet for print media. The macromedia.com website makes use of a separate print media style sheet.

Figure 8. The Style Rendering menu showing the possible media types

A handy easy-to-overlook option is the last one: Display Styles. This option is enabled by default, but deselecting it removes all CSS rendering. This is useful as a sanity check for those of you who are concerned about accessibility. For example, reviewing the page without CSS rendering can help a developer see the order of content as a screen reader might encounter it.

The other group of display choices is available from the Document Toolbar. Clicking the visual aids button (the funny-looking eye) presents the following submenu.

Figure 9. The Visual Aids menu in the document toolbar

These choices will be most useful for users defining properties that include box properties and outlines. For each of the explanations below, I include a screen shot of exactly the same page. Each screen shot shows how the page is displayed with only the described display option enabled. The screen shot includes a DIV tag defined with positioning, padding, and margins; a DIV tag used only to house a P tag, and a P tag.

CSS Layout Backgrounds: This choice will add a background color to any elements affected by a CSS property. Turning this setting on can affect the color appearance of text elements, so I recommend that you enable and disable the option as needed.

Note: The color of the layout backgrounds may not match those in Figure 10, and the background colors will change if you turn the feature on and off. There are a total of 16 colors that Dreamweaver can assign to the background colors. If you have more than 16 DIV tags on a page and some are nested, the overlapping background colors may be the same color. Turning this feature off and back on will help you work around this.

Figure 10. Styles shown with the CSS Layout Backgrounds visual aid enabled

CSS Layout Box Model: This choice adds some crosshatching to the inside and outside of a selected box element, representing any padding and margin settings. You will need to select the dotted border in the csstest.htm sample file for it to display as shown in Figure 11. Also, once the element is selected, there is a tooltip that will appear depending on where within the element you hover. In the screen shot below, I was hovering over the outline of the selected DIV tag. If I hover over the outer crosshatch, the tooltip indicates only the margin settings. If I hover over the inner crosshatch, the tooltip indicates only the padding settings. If I hover over the inside of the content, the tooltip indicates settings such as width and height.

Figure 11. Styles shown with the CSS Layout Box Model visual aid enabled

CSS Layout Outlines: This option adds an outline to any DIV tags. If nothing else, this is useful to help a developer select the DIV tag, but it is a handy way of seeing which elements are controlled by DIV tags. For example, in the screen shot below, it is simple to see that the last paragraph on the page is not in a DIV tag, but the one above it is.

Figure 12. Styles shown with the CSS Layout Outlines visual aid enabled

Layer Outlines: This option adds an outline only to DIV tags that are defined with box model properties. In other words, it outlines those DIV tags that are used for positioning purposes. This is illustrated in the screen shot below (remember the middle paragraph is contained in a DIV tag, yet that tag is not bordered). The top box still retains its highlighted border.

Figure 13. Styles shown with the Layer Outlines visual aid enabled

Visual Display of Elements Has Improved

Dreamweaver 8 does an admirable job of rendering CSS elements, including at least one of the elements shown in the previous screen shots. Previously, box elements defined with a border of any kind displayed with a single line. Dreamweaver 8 now displays all border types, including the dashed line illustrated in the screen shots.

The most apparent improvements are how Dreamweaver renders various positional elements, especially those in complex pages and with nested tags. The following is a sampling of the rendering improvements:

• Border styles
• Positioning properties, especially nested elements
• Support for the overflow property
• First-line and first-letter pseudo elements
• Support for rendering CSS properties on a horizontal rule

The More Things Change, the More They Stay the Same

I am cheerful that the interface in this version retains so many of the improvements introduced in the previous version. Since these remnants will continue to be important for user workflow, I am listing them here. Readers who are upgrading (and who are familiar with CSS in Dreamweaver MX 2004) can jump ahead. New users will benefit from this overview and from any of the Dreamweaver Developer Center articles on CSS written for Dreamweaver MX 2004.

Property Inspector

The following interface elements are the same in Dreamweaver 8 as in Dreamweaver MX 2004:

• When styling text using the Property inspector, Dreamweaver creates CSS style declarations (unless you deselect the default preference).
• When you style text with a tag selected, Dreamweaver creates the style declaration as a definition for the tag (as long as the tag does not already have a style definition). Otherwise, Dreamweaver creates the style declaration as a new class style.
• Available class styles (whether defined in the document or in a linked or imported style sheet) are listed in the Style pop-up menu.
• The Page Properties button opens the Page Properties dialog box, allowing the user to define styles that affect the page display.

Page Properties Dialog Box

The Page Properties dialog box is an important starting point for users creating a page. In this dialog box, you assign settings that will affect the appearance of the entire page. As of Dreamweaver MX 2004 and continuing in this version, some of these settings are designated with CSS style declarations. By the way, assigning CSS properties using the Page Properties dialog box writes the code for the properties to the head of the HTML document, even if the document links to an external style sheet. That is fine for now; I show you how to migrate the style declarations to an external style sheet in the "Moving from Document Style to External Style Sheet" section later in this article.

• Choosing settings in the Appearance category will create CSS style declarations for details such as default page font settings, background color and image, and page margins.
• A user may create CSS style declarations for the appearance of each hyperlink state in the Links category.
• The Headings category allows a user to set the font size and color of each heading level, in addition to setting a single font face to be used for all headings.

CSS Styles Panel

I have detailed a host of changes to the CSS Styles panel above, but some things have remained the same. The All mode of the CSS Styles panel will seem very similar to the behavior of the CSS Styles panel in Dreamweaver MX 2004.

In the next section, I will take you through some mini-workflow recommendations for the new CSS features in Dreamweaver 8.

Mini-Workflow Recommendations

In preparation for writing this article, I revisited the article I wrote for the previous version, An Overview of CSS in Dreamweaver MX 2004. With a certain amount of chagrin, I realized that I had not been following many of the workflow steps I suggested over these past months.

In the short time I have been using Dreamweaver 8, on the other hand, I have already changed my ways. In short, the user interface changes in this version better support a similar workflow. Most importantly, though, I don't intend to provide a single workflow. Follow the steps provided to test various workflows, but choose the one or ones that work best for you.

Create a CSS Test Site

You will use this same site to house the files you create in the following workflows. This is also the same site I used in my CSS article for the previous version of Dreamweaver. So, if you diligently followed my previous article, use the same site. The file names for this article are different (so everything will live happily together).

1. Launch Dreamweaver 8 and choose Dreamweaver Site from the Create New column in the Start Page menu. Alternatively, once you launch Dreamweaver, choose Site > Manage Sites > New, then click Site. Click the Advanced tab if necessary.
2. In the Site Name text box, type CSS test site.
3. Click the file folder icon next to the Local Root Folder text box.
4. In the Choose local root folder dialog box, browse to an appropriate place on your hard drive and click the New Folder icon to create a new folder called css_test.
5. Select the css_test folder as the local root folder for your site.
6. Click OK to accept these minimal settings. If you came to the Site Definition dialog box from the Manage Sites dialog box, click Done from within the Manage Sites dialog box.

Now that you have your site defined, I will guide you through the workflows in the next few pages.

Quickly Generate Simple Styles and Build Upon Them

This may be how some developers accidentally use Dreamweaver 8 at first. Although the style attributes you can define within the Property inspector are limited, it is easy enough to add attributes to existing selectors. And, let’s face it: it sure is handy.

Determine the Overall Appearance of the Page

1. With the CSS test site active, create a new HTML file. Again, this is easy to do from the Start Page if that is in your Dreamweaver window display, but you can also choose File > New; then from the Basic page category, select HTML. Click Create.
2. Save the file into the CSS test site as csstest.htm.
3. In the Property inspector, click the Page Properties button to open the Page Properties dialog box. The Appearance category appears by default.
4. Specify the following settings:
   Page font: Arial, Helvetica, sans-serif
   Size: 10 pixels
   Text color: #333333
   Left Margin, Right Margin, Top Margin, Bottom Margin: 0 pixels
5. Click OK.
6. Switch to Code view and look in the head region of csstest.htm. The CSS code is efficiently written (and note that the TD and TH tags are included with the body tag to receive the appearance stylings).
7. Switch back to Design view.

Setting CSS While Adding Content to the Page

In the following scenarios, I intend to show you different ways to quickly define simple properties.

Defining a Class Style

1. Type: This is the way highlighted text will appear. Click Enter/Return to move to the next paragraph. This also ensures that the text you just typed is also set within a paragraph tag.
2. Select the text of the previous paragraph (make sure to select the entire paragraph).
3. In the Property inspector, notice the text color is already set to #333333. Click the color box and choose #CC3366 (a lovely dark pink).
4. With your cursor still within that newly-pink paragraph, note that the Tag Selector (the tags listed in the lower left corner of the Document window) shows <p.style1<.
5. In the Property inspector, click the Style pop-up menu and choose Rename.
6. In the Rename Style dialog box, verify Style1 is selected in the Rename pop-up menu, then type hilite_text in the New Name text field.
7. Click OK. Notice the Results panel appears with the Search tab showing the class style name was changed in the body of the document. Clicking the paragraph again will now show <p.hilite_text< in the Tag Selector.

Defining a New Style for All Paragraphs

The previous steps succeeded in creating a class style. Class styles, which are the only styles you will see listed in the Property inspector's Style pop-up menu, are style rules that you can apply to any tag. The next set of instructions explain how to redefine a tag.

1. Click in the empty paragraph below the pink paragraph. Since you created this paragraph at the beginning of the instructions, this paragraph will not use the hilite_text class style.
2. Type: THIS is how all bare paragraphs will appear.
3. In the CSS panel group, click the New CSS Rule button in the bottom right corner.
4. In the New CSS Rule dialog box, select the Tag option from the Selector Types. Then choose P from the pop-up menu of tags. Leave the Define in choice to This document only.

Figure 14. The New CSS Rule dialog box

5. Click OK.
6. In the CSS Rule definition for P dialog box, specify the following settings:
   (Type category) Font: Geneva, Arial, Helvetica
   (Type category) Color: #0000CC
7. Click OK. The paragraph (and any other paragraph unless a conflicting class style affects it) is now be blue.

Defining a New Style That Includes Positioning

This particular workflow takes advantage of a new menu command that I have not otherwise described.

1. Press Enter/Return to move to the next line.
2. Select Insert > Layout Objects > Div Tag.

Figure 15. The Insert Div Tag dialog box

3. In the Insert Div Tag dialog box, choose At insertion point from the Insert pop-up menu.
4. Click the New CSS Style button. The New CSS Rule dialog box opens.
5. Leave the Selector Type set to Class and the Define in set to This document only. Type layer1 in the Name text field.
6. Click OK.
7. In the CSS Rule Definition for the .layer1 dialog box, specify the following settings:
   
   • (Box category) Width: 250 pixels
   • (Box category) Padd ing: 10 pixels (leave the Same for all option checked)
   • (Box category) Margin: 10 pixels (leave the Same for all option checked)
   • (Border category) Style: Dashed (leave the Same for all option checked)
   • (Border category) Width: medium (leave the Same for all option checked)
   • (Border category) Color: #000000 (leave the Same for all option checked)
   • (Positioning category) Type: relative
   • (Positioning category) Placement: Left: 50 pixels
     
8. Click OK. This creates the rule for .layer1.
9. The Insert Div Tag inspector is still available, but the Class field now reads layer1. Click OK.

Until you click OK, the DIV tag will not be written to the code of the page.

These simple workflow recommendations can help you get started, but you may be left wondering how these rules all work together. Let's use Dreamweaver to find out.

Using Dreamweaver to Understand Rules

I have described the new user interface features available in Dreamweaver 8, but let's use these features to explore what you have created.

1. 1. In the document window, click in the pink sentence.
2. 2.In the CSS Styles panel, click the Current button. Remember, the Current category helps us explore the rules affecting whatever is currently selected.
3. 3.Organize the sections of the CSS Styles panel like the screen shot below. In particular, the contents of the Rules category may not be visible until you drag the Properties category down in the panel group.

Figure 16. Using the Current mode to explore the rules you have created

4. In the Summary section, the listing includes properties defined in a couple of rules: the font-family and font-size properties are defined in the Ptag and the color property is defined in the .hilite_text class rule. Yet the display in the Summary section makes no note of those differences. The section merely describes which properties affect the place where your cursor is placed. Click each line in the Summary section to see how the display in the Rules and Properties sections change.
5. The Rules section lists the cascade of rules affecting the selection. In fact, because of this listing, we can see that the properties defined in the body rule (such as the font-family and font-size properties) are countermanded by the properties defined in the P rule, and properties (such as the color property) defined in the P rule are countermanded by properties defined in the .hilite_text class rule. Click the Show Information button in the top right corner to see how the About category works.
6. In the document window, click in the text that was created automatically when we created the DIV tag. Notice this text is smaller and gray.
7. Look in the CSS Styles panel to notice the font-family, font color, and font size. Then click each line to see in the About category where that property is defined.
8. Click in the text contained in the DIV tag again, then choose Paragraph from the Format pop-up menu in the Property inspector. Note the text appearance has changed.
9. Refer back to the CSS Styles panel to see where those font properties are defined.
   Now that you are comfortable with the information you can get in the CSS Styles panel, let's actually use the panel itself to create some style properties.

Use the CSS Styles Panel to Create and Edit Properties

Using the CSS Styles panel to create or edit properties is a flexible workflow, but one that may be comfortable only for developers accustomed to new user interface. But let's investigate what you can do.

1. In the Document window, click the pink sentence. It's time to truly highlight it.
2. In the CSS Styles panel, click the color box for the color property in the Properties section. Select #003300 (a dark green).
3. Click the Add Property link in the Properties section.
4. Choose background-color from the pop-up menu that appears, then click the corresponding color box and choose #FFFF66 (a yellow).

That was fairly simple. Now you will create a rule and edit its properties.

1. In the CSS Styles panel, click the New CSS Rule button (the little plus icon in the bottom right corner of the panel).
2. In the New CSS Rules dialog box, choose the Class Selector Type option, and set the Define in choice to (New Style Sheet File). Type offset_text in the Name text box.
3. Click OK.
4. Since you chose to create a new style sheet, Dreamweaver first forces you to create the style sheet file. In the Save Style Sheet File As dialog box, make sure the folder for this site is where the file will be saved, then type test.css in the File Name text box. Click Save.
5. Define the following settings:
   
   • (Type category) Color: #000000
   • (Box category) Margin: Left: 10 pixels (uncheck the Same for all option)
     
6. Click OK.
7. In the document window, press Enter/Return to create a new paragraph on the page (this paragraph may be anywhere) and type new styles in separate CSS file.
8. Wherever you were when you clicked Enter/Return will dictate whether this paragraph already has a rule applied or is contained within a DIV tag. For your purposes, you are only concerned that this paragraph uses your new rule. With the cursor still in the sentence, click the icon in the tag selector.
9. In the Property inspector, choose offset_text from the Style pop-up menu. Note that all class styles already defined are also listed in this pop-up menu.
10. In the CSS Styles panel, click the All button to see all rules available to the page. Note that this new rule is listed under test.css.
11. With the .offset_text rule selected in the All Rules section, click the Add Property link in the Properties section.
12. Choose the letter-spacing property from the pop-up menu. In the right column, type 15, and choose pixels.
13. In the Properties section, switch views by clicking the Show List View button.
14. Scroll down the list of available properties to get to border-bottom (phew... quite a long list, heh?).
15. This is what could trip up developers who are not accustomed to how CSS properties are written in code. I want to add a bottom border to this element, but there are so many choices. Note that if you select border-bottom, but hover over the right column, the user interface displays "style color width" in a tooltip. Take note! This is a subtle indicator of the definitions comprising this property.
16. The next three properties in the list give you that level of detail. Enter the following in each:
    
    • border-bottom-color: #000000
    • border-bottom-style: dotted
    • border-bottom-width: 1 pixel
      

So far, you have been creating your styles in both the HTML document and in an external style sheet. In most cases, you want to keep all your styles in one place, and that one place is the external style sheet. In the next section, I will show you how to migrate the styles from the document into the external style sheet.

Moving from Document Style Sheet to External Style Sheet

Some of the nicest workflow features - such as using the Page Properties dialog box to define CSS style properties - still write the rules to the head of the existing document. In most cases, you will want to move those rules into an external style sheet. There are two approaches available to do this. The first option is to export any existing styles into a new external style sheet. The second option is to copy the style code into an existing external style sheet. If you have an existing external style sheet, you should copy the code into it manually using the second option I outline below. Don’t try to export into an existing style sheet, or you will overwrite the CSS code that is already in it.

Option 1: Export Any Existing Styles into an External Style Sheet

1. Save csstest.htm as csstestexport.htm.
2. In csstestexport.htm, choose File > Export > CSS Styles.
3. In the Export Styles as CSS File dialog box, save what will be a CSS file as test2.css. Note: The file name cannot be test.css because exporting CSS styles creates a new CSS file with the rules defined in the HTML document, replacing any CSS file with the same name. Any rules defined in the original CSS file would be lost.
4. Although a CSS file has been created containing all of your styles, those same styles also still exist in the head of your document. If it is not already open, launch the CSS Styles panel by choosing Window > CSS Styles.
5. In the CSS Styles panel, you will see <style< and the existing styles may or may not be visible indented underneath. This listing includes all of the styles included in the internal style sheet. Select <style< in the CSS Styles panel and click the Delete CSS Style icon in the bottom right of the panel (it looks like a trash can). Although the page suddenly looks ugly-and the style code has been removed from the head of csstestexport.htm-the class attributes are still written to the code where those classes were assigned.
6. Still in the CSS Styles panel, click the Attach Style Sheet icon.
7. Within the Attach External Style Sheet dialog box, click the Browse button and locate the test2.css file you exported in step 3. Click OK, and then OK again to return you to the page.
8. Note that the page returns to the same appearance, including the paragraph of text to which you applied the class style. The CSS Styles panel now says test2.css instead of <style<, although you also still have the test.css style sheet.
9. Switch to Code view and note that all style code has been removed from the head of the document with the exception of two link tags, which point to the test.css and test2.css files.

Option 2: Copy the Style Code into an Existing External Style Sheet

Note: If you followed the steps in option 1 above, the code will have already been moved to an external style sheet. So when you get to step four below, you won’t see the code to be copied. If you want to follow the steps below, try undoing a few times in Dreamweaver (Edit > Undo) to get the code back into the head of the csstest.htm file. Then, use the steps below to copy the CSS code into the existing external style sheet.

1. Open test.css, which opens in Code view.
2. Open csstest.htm. If it opens in Design view, switch to Code view by selecting View > Code.
3. Scroll to the top of the code, locating the style tags in the head of the page.
4. Copy the code contained within the open and close style tags by selecting Edit > Copy. The code in my document looks like the following
   
   

   p { font-family: Geneva, Arial, Helvetica, sans-serif; color: #0000FF; } .hilite_text { color: #003300; background-color: #FFFF66; } body,td,th { font-family: Arial, Helvetica, sans-serif; color: #333333; } .layer1 { border: medium dashed #000000; margin: 10px; width: 250px; padding: 10px; position: relative; left: 50px; }

   
   
5. Switch to test.css and paste this code below the existing code.
6. Save test.css and close.
7. In csstest.htm, remove the remaining style tag code:
   
   

   <style type="text/css"< </style<

After using both workflows for migrating CSS rules from a document to an external style sheet, notice the test.css has all of the rules, and test2.css has all but one of the rules. In development, avoid this by using only one of the above workflows, then attaching external style sheets to new documents as you create them.

You have used the new UI elements in Dreamweaver 8 to create styles... and to figure out what you have created. You have also investigated some of the new display capabilities for style properties.

Where to Go from Here

Now that you are familiar with the CSS tools and features in Dreamweaver 8, I recommend that you read Adrian Senior’s six-part tutorial on designing with CSS in Dreamweaver 8. Even if you have been through the Dreamweaver MX 2004 version of the article series, I recommend that you go through it again. They have been completely updated for Dreamweaver 8 and will help you get into good CSS workflow habits.