From table-based to tableless web design with CSS – Part 2: CSS starter pages

In Part 2 of this tutorial, you are going to take a typical table-based layout and turn it to an equivalent CSS based-layout using starter pages in Dreamweaver. In the process, you will see that many things really are easier and more efficient in CSS design.

Part 1 of this mini-tutorial series explores some of the basic CSS techniques that are applied in the starter pages that you will use in this part.

The table-based version of the Yacht Club design (shown in Figure 1) uses the following techniques:

• Content is placed in a table that has two columns and three rows.
• Header and footer table cells use spans to merge them into long cells.
• The buttons use the Dreamweaver Rollover Image behaviors and each uses two images, one for the on and one for the over state of the links.
• The header, left column, and footer each have a background color on their cells.
• The content text wraps around the sailboat image by virtue of the image align and hspace attributes.

Note: The images used in the layout in Figure 1 come from a Community MX stock photo collection by photographer Jillian Kossin. You can download the collection for free from Community MX.

Note: The last technique above, along with many HTML attributes and properties used for design, is deprecated in favor of CSS techniques that accomplish the same task. Deprecated attributes are being dropped from the specifications, though browsers—for now—continue to render them.

The CSS-based version of this design (shown in Figure 2) uses the following techniques:

• Content is placed in various DIVs, which are generic boxes that you can use in place of cells.
• The buttons are pure CSS and require no images, thus making it easy to add or delete links.
• The illusion of equal-height columns is accomplished with the use of the faux column technique.
• The images that contribute to page design go into the CSS document, and the images that provide content (such as the logo) go into the HTML document. This separates content from presentation.
• The content text wraps around the sailboat image by virtue of the float property.

When converting a table-based layout to a tableless layout, you could switch your table markup to DIVs. Some developers advocate this technique as a way of visualizing the conversion between one method and the other. It might help you visualize what DIVs you will need in order to build an equivalent structure.

The table code for The Yacht Club website looks like this (some content has been truncated to make this code easier to read and to save room):

The table tag could be thought of as the container DIV, and the tr and td elements convert to the header, sidebar, content, and footer DIVs. All presentation code—such as the bgcolor attribute—is removed and will be replaced in a style sheet. The DIVs are given semantic IDs that describe their structural function in the layout.

This switch from table markup to DIVs is certainly one route you can take, but you would have to start from scratch in developing your style sheet and perform many of the steps from Part 1 of this tutorial to float, clear, center, and put into place all the other basic features of the layout shell.

There is an easier way: You can develop the page with a CSS starter page. Beginning with Dreamweaver CS3, Adobe provides more than 30 CSS layouts that you can use as the starting point of almost any design.

Start by defining a new site in Dreamweaver for this project. (Note: If you completed Part 1 of this tutorial, you can continue to use the site you already set up.)

1. Download the sample files for this article and unzip them.
2. Choose Site > New Site.
3. Select the Advanced tab in the Site Definition dialog box.
4. Select the Local Info category on the left.
5. In the Site name field, type Yachts.
6. Next to the Local Root Folder field, click the folder icon.
7. When the browse dialog box displays, navigate to the yachts_start folder included with the sample files that accompany this tutorial.

Choose the CSS starter page

With the site defined, the next step is to select the CSS layout you want to use.

1. Choose File > New. The New Document dialog box will open.
2. In the Blank Page category of the New Document dialog box, select HTML as the Page Type, and then select the Layout labeled "2 column fixed, left sidebar, header and footer".
3. For the Layout CSS setting, select Add To Head. Often designers use an embedded style sheet while they are developing a layout and then export the CSS to an external style sheet after they are happy with their designs. (Embedded styles go into the head of the HTML document itself.) This setting enables you to follow that approach for this tutorial.
4. Click Create (see Figure 3).
5. Save the XHTML file as index.html to the defined site folder.

Simplify the CSS code

Each of the starter pages uses a class on the body that describes its main features. For example, the two-column layout you just chose uses this class: <body class="twoColFixLtHdr">. This is done to distinguish each starter page from the others. You might want to use more than one starter layout within a site, for example you could use a three-column layout on one page and a two-column layout on another. The class on each allows you to use descendant selectors that have, for example, two individually styled headers such as .twoColFixRtHdr #header and .thrColFixHdr #header in the same style sheet. Because you are only going to use one starter page layout for this tutorial, you can simplify the code to make it easier to read and add new rules.

1. Click the Code View button to show the page in Code view.
2. In the head of the document, find and copy an instance of the following string:.twoColFixLtHdr.
3. Choose Edit > Find and Replace. From the Find In popup menu, select Current Document. Dreamweaver automatically places the copied code in the Find field. Leave the Replace field blank.
4. Make sure that Search In is set to Source Code.
5. Click Replace All (see Figure 4). Dreamweaver will remove all instances of the class from each rule.
6. You'll also want to remove the class attribute from the body tag. In Code view, change <body class="twoColFixLtHdr"> to simply <body>.

With the basic layout shell and CSS rules already in place, you can accomplish much of this design by modifying the existing style sheet.

Note: Before starting on these steps, you may want to open up the images folder and familiarize yourself with the images that will form the puzzle pieces used in this faux column layout.

1. If it is not already open, open the CSS Styles panel by choosing Window > CSS Styles.
2. You may need to click the plus sign (Windows) or arrow (Mac OS X) to the left of <style> in the CSS Styles panel to expand the list of rules.
3. Double-click the body rule to edit it (or select it and click the pencil icon at the bottom of the top portion of the panel)
4. Select the Background category on the left.
5. Next to the Background-color field, type #FDFDFD. This is the bottom color of the body_BG.jpg image. The image and background color will blend into each other to form a seamless background for the entire page.
6. Next to the Background-image field, click the folder icon.
7. Navigate to the body_BG.jpg file in the images folder of your site.
8. Set Background-repeat to repeat-x (see Figure 5).
9. Click OK.

Note: If you look at the Type category of the body rule, you'll see that text size is set to 100%. That value may puzzle you a bit if you're used to setting font sizes in absolute units such as pixels. Scalable font sizes give more control to the user. This 100% value represents 100% of the font-size the user has set up in the browser preferences. For example, if your user has a vision impairment, she may have her font preferences set to 18 pixels rather than the default 14 or 16 pixels. The 100% value, therefore, represents 18 pixels, and other font values will scale from that base value.

10. Now open the #header rule to edit it.
11. Select the Background category on the left.
12. Next to the Background-image field, navigate to header_BG.jpg.
13. Set the Background-repeat option to no-repeat.
14. Click OK.
15. In the CSS Styles panel, select the #header h1 rule.
16. Click the trashcan icon at the bottom of the panel to remove it. Note the margin escaping effect. The #header h1 rule had included a zeroed out top margin that you just removed (see Figure 6).

17. Click inside the header text.
18. Select <h1> in the tag selector at the bottom of the Document window.
19. Delete the text, and the h1 element is gone too. The background image is no longer visible. Remember DIV behavior! If there is no content in a DIV, it collapses to have no dimension. You'll fix that now.
20. With your cursor still inside the header DIV, choose Insert > Image.
21. Navigate to the images folder for your site and select logo.jpg.
22. When the Image Tag Accessibility Attributes dialog box displays, type The Yacht Club as the Alternate Text. If a visitor is visually impaired or has images turned off for some reason, the alternate text will describe the image for her.
23. Click OK. The image opens up the header and the puzzle pieces fit neatly together (see Figure 7).

    Note: There are two images that make up the header. There is the CSS background image that provides the design of the header, and there is the foreground image that provides the content of the header. Keep in the mind that there are many image replacement techniques that you can use to make the foreground image (logo) more accessible to visitors with disabilities. As you become more advanced in CSS layouts, you can investigate these techniques.

24. Select the #sidebar1 rule in the CSS Styles panel.
25. In the Properties pane of the panel (at the bottom), select the background property (see Figure 8).
26. Click the trashcan icon at the bottom to delete this property and its value.

27. Double-click the #container rule to edit it.
28. Select the Border category on the left.
29. Remove the borders from all sides.
30. Select the Background category on the left.
31. Remove the background color. Now the gradient from the body background image shows through in the main content area.
32. Next to the Background-image field, navigate to the container_bg.jpg file and select it.
33. Set the Background-repeat option to repeat-y to tile the image vertically down the page.
34. Click OK.
35. Double-click the #footer rule to edit it.
36. Select the Background category on the left.
37. For the Background-color, type #00593D.
38. Select the Box category.
39. Change the Padding settings to Top: 10 px, Right: 0, Bottom: 10 px, Left: 270 px. (Make sure you select pixels as the unit of measurement for each. When a value has been 0, Dreamweaver does not automatically select a unit of measurement after you add a new value.)
40. Click OK.

Study the box model

Before you continue building the Yacht design, you should familiarize yourself with the concept of the box model. The properties you see in the Box and Border categories of the Dreamweaver CSS Rule Definition dialog box will cause you fewer problems if you understand how they work.

Each block element generates a box—invisible by default—that can be given borders, margins for space between it and other boxes, and padding within to push the content away from the edges of the box. These can be applied as one global value all around the box or as individual values for each side. Inside the padding is the actual content area where you place your page elements.

When you assign a specific width to an element, modern browsers add padding and border measurements to the dimensions you allocate for the content. For example, if you set the width of a sidebar to 200 pixels and then add 20 pixels of padding and 2 pixel borders to each side, a standards-compliant browser will read the total width of the sidebar as 244 pixels (see Figure 9). This is something to keep in mind when you use the width property along with padding and borders. This concept is similar to the padding and widths set for tables and cells that can confuse some designers when table designs expand and lose their pixel precision.

The box model also applies to heights. Because the box by default expands vertically as long as there is additional content, this does not usually create discrepancies like those that occur with explicit widths.

Note: John Gallant and Holly Bergevin of Community MX wrote an in-depth article about the box model. It includes information about the different box model that Internet Explorer 5 uses. If you must support that older browser, you will want to read the article.

Finish the layout

Follow these steps to set the color of the footer text:

1. Double-click the #footer p rule to edit it.
2. Select the Type category on the left.
3. In the color well next to Color, select white.
4. Click OK.

You have now modified existing rules and have made substantial progress towards the finished layout (see Figure 10).

Now you'll add some of the finer text details to the layout.

1. Locate the Title field at the top of the Document window.
2. Delete "untitled document" and type The Yacht Club (see Figure 11).

3. Change the generic heading text:
   • h1: Luxury Yachts
   • h2: Sail to the Bahamas
   • h3: Welcome!
4. In the footer, type © 2009 Luxury Yachts - bring a cup for a bailout.

   Note: To insert the copyright symbol, choose Insert > HTML > Special Characters > Copyright.

5. Click the plus button at the bottom of the CSS Styles panel to create a new rule.
6. Select Compound as the Selector Type.
7. For the Selector Name, type h1, h2, h3. You are going to set all heading text to one blue color, so it makes sense to style all headings in one rule. If you were to change that color later, you would only have to change it one rule instead of three.
8. Click OK.
9. Select the Type category on the left.
10. For the Color, type #00583F.
11. Select Normal as the Font-weight.
12. Click OK.
13. Next create three separate rules to set the font size that will be unique to each of the h1, h2, and h3 elements. (Remember that these sizes scale from the user's browser font preferences.) Use Tag as the Selector Type.
    • The h1 will have a font-size of 140%.
    • The h2 will have a font-size of 130%.
    • The h3 will have a font-size of 120%.

Finally, you'll create a group selector to set some common properties and values for paragraphs in the different DIVs.

1. Create a new rule with Compound as its Selector Type.
2. For the Selector Name, type #mainContent p, #sidebar1 p, #footer p.
3. Click OK.
4. Select the Type category on the left.
5. For the Line-height, type 1.4. This will open up the lines of text to make them easier to read on screen.
6. Select Multiple as the unit of measurement (see Figure 12). This value may seem a little odd, but it avoids bugs in some browsers when certain units of measurement are set on line height.

7. For Font-size, type 85 and select % as the unit of measurement.
8. Click OK.

Inserting an image

Follow these steps to insert the sailboat image:

1. Place cursor in front of the "lorem ipsum" text in the first paragraph of the mainContent DIV.
2. Choose Insert > Image.
3. Navigate to sailboat.jpg.
4. Choose or select it, and in the alternate text dialog box type Sailboat.
5. Click OK.
6. With the image still selected, select fltrt as the Class in the Property inspector (see Figure 13). The CSS starter pages include generic right (fltrt) and left (fltlft) floating classes.

Adding an unordered list of links

In the interest of semantic markup and accessibility, many designers format lists of links—such as buttons down the side of a page or the navigation bar at the top of a page—as unordered lists. A list is just a way of grouping related elements, such as the navigation buttons in the Yacht site. Follow these steps to modify the page and apply this best practice:

1. Delete the first paragraph of text in sidebar1.
2. Click in front of the second paragraph of text in sidebar1.
3. Press the Return key.
4. Type Home.
5. Select the "Home" text and in the Link field of the Property inspector, type javascript:;. This adds a dummy link to the text. The link doesn't go anywhere, but makes the text behave like a link so that you can style it with CSS. Later you can add real links to the text.
6. Press the Return key again.
7. Type About Us and repeat step 5 to make it a link.
8. Press the Return key again.
9. Repeat these steps to add links for Membership, Our Boats, Current Races, and Contact Us.
10. Select all six links and click the unordered list button in the Property inspector (see Figure 14).

11. With the list selected, click the Code View button.
12. Locate the opening ul tag and set the value of its id attribute to nav (see Figure 15).

13. Create a new Compound rule, and for the Selector Name type ul#nav (see Figure 16).

14. Set the properties and values as follows:
    • In the List category on the left, set the List-style-type to None. This removes the bullets from the list items.
    • In the Box category, set the Padding values to 0 0 153px 0 (Top=0, Right=0, Bottom=153, Left=0; the acronym spells TRouBLe). The bottom padding value is the height of the image that you will use as a background image to decorate the bottom of the list.
    • Set the Margin values to 0 0 20px 0.
    • In the Background category, next to the Background-image field, navigate to buoy.jpg and select it.
    • Set its Background-repeat option to No-repeat
    • Set the Background-position (x) to Left.
    • Set the Background-position (y) to Bottom.
    • Click OK.
15. Create a new Compound rule, and for the Selector Name type #nav li a .
    • Select the Type category and set the Font-size to 90%
    • Set Text-decoration to none by clicking its check box.
    • Select white in the color well next to Color.
    • Select the Block category and select Block as the Display option. This makes the entire button clickable in Internet Explorer rather than just the text.
    • Select the Background category and set Background-color to #09553F.
    • Select the Box category and set Padding to 4px on all sides.
    • Select the Border category and deselect Same For All.
    • Set a border on the bottom only, and set the Style as Solid, Width as 1 pixel, and Color as #3574A7.
16. Click OK.

    You are now going to work with a new selector type, also found under the Compound category of the CSS Rule dialog box. The link pseudo class selectors let you style links differently for the various states. Links start in their initial state, and can move through the visited, hover (when the cursor is over them) or active (while they are being clicked) states. There is also the focus state that allows users who tab with a keyboard to see a unique state. (The focus state is not included in the Dreamweaver CS4 dialog box.)

17. Create a new Compound rule. For the Selector Name, type #nav li a:hover, #nav li active, #nav li focus (ID, descendant, group, and pseudo class selectors all in one!)
1. Select the Type category and for the Color type #123464.
2. Select the Background category and for the Background-color type #B7DAD8.
18. Click OK.

Note: The link states are listed in a specific order: a:link, a:visited, a:hover, and a:active. When you style the links individually, you should follow this order so that you can avoid unexpected results. Many designers remember the order with this mnemonic device: LoVeHAte (LVHA).

That's it! The buttons are complete (see Figure 17) and you're done with the basic design. From here on out it's bells and whistles and tidy-up work.

In Dreamweaver CS3 or CS4 you can drag and drop rules right in the CSS Styles panel so that you can order them any way you like. I tend to order them first by global rules, then in the order of how the DIVs fall in the source, and finally by generic classes (see Figure 18). There are as many ways to organize rules as there are developers, however.

Take a moment now to order your rules so that it will be easier to locate each one if you ever need to go back and make edits. A logical order also makes it easier for team members to more quickly locate rules in your style sheet.

Note: In many cases, such as with this series of rules, the ordering of the style sheet doesn't matter. Each property/value pair is unique, and nothing later in the style sheet overwrites it or has greater importance. However, in more complex style sheets, the order might matter. In straightforward conflicts where there are two rules for the same selector, the second rule wins out. There are also cases where a rule has more specificity or weight than a rule further down in the style sheet, and the browser will render it. As you become more advanced in working with CSS, you may want to familiarize yourself with the rules of specificity and the cascade.

At the moment, the rules are embedded in the head of your document between the opening and closing style tag.

To export the styles to an external style sheet:

1. With your page open, Shift-click to select all the rules in your style sheet (see Figure 19).

2. Right-click the Options button on the top-right side of the CSS Styles panel.
3. Select Move CSS Rules (see Figure 20).

4. When the Move To External Style Sheet dialog box displays, select A New Style Sheet (see Figure 21).

5. Click OK.
6. When the Save Style Sheet File As dialog box displays, navigate to your site folder.
7. Name the new style sheet main.css (see Figure 22).

8. Click Save. Dreamweaver exports the styles to the new style sheet.

   Dreamweaver adds a link to the new style sheet in the head of your document. Now you can delete the empty style element from the head of the document.

9. Select the style element in the CSS Styles panel (see Figure 23).
10. Click the Trash can at the bottom of the CSS Styles panel. The style element is removed.

Some people resist creating layouts with CSS because of browser rendering inconsistencies, particularly in Internet Explorer. Dreamweaver CS4 has an indispensable feature called Check Page that helps you with this problem. Its Check Browser Compatibility option identifies and offers solutions for possible CSS bugs in your layout. It will help you prevent potential issues that your users might see depending on the browser that they use to view the page.

1. With the index page still open, choose File > Check Page > Browser Compatibility.
2. Dreamweaver scans the page for possible CSS browser issues and lists them in the Browser Compatibility Check tab of the Results panel. The Yacht layout triggers an "Extra Whitespace in List Links Bug" for each button. In the right side of the panel, you will see a description of the problem (see Figure 24).

You may remember from past steps that you converted the natively inline anchor tags into block elements so that the entire button would be clickable in Internet Explorer. Additionally, the links were given no dimension. These two conditions trigger the extra white space in Internet Explorer. If you were to look at the page in Internet Explorer 5 or 6 (IE 7 corrects the bug!), the buttons would not fit snuggly together, but would have wide gaps of space between them.

Note: You can find more information on list display problems in Internet Explorer at Community MX.

To explore possible solutions, click the link labeled "View Solutions" located under the description of the problem. The link will take you to this specific bug's page on the new CSS Advisor section of the Adobe site (see Figure 25).

You'll find a number of possible solutions to the whitespace in list links bug. One common fix is to remove the white space in the code. Typing the opening tag of each list item so that it comes right after the closing tag of the previous one closes the space between them in Internet Explorer. In Code view remove the white space between each list item. Here is an example of the edited code:

If you run the Check Browser Compatibility feature again, Dreamweaver should report that there are no longer any issues.

A source of many Internet Explorer bugs

This section of the tutorial is a little technical, and you can skip it for now if you like, and come back to it as you gain more experience in CSS layout.

If you are interested in learning about more advanced "bug busting", you can use one of the more elegant solutions for the whitespace in list links bug that is listed at the CSS Advisor. One is to add the zoom property to the link rules, and the other is to use the display value inline-block and then revert back to the desired value, display:block. The idea behind these solutions is to trigger hasLayout, a source of many bugs and problems in Internet Explorer.

The hasLayout concept is tricky to define. There is a definitive guide to hasLayout that is about 48 pages long when printed out if you are interested in all the gory details. You can also read about the Internet Explorer hasLayout property in an article on Microsoft Developer Network. (Don't get confused that there is such a property in the CSS specs. There isn't!) It has a nice, clear, succinct explanation of hasLayout:

"To begin with, there are two sets of elements.

1. Elements that rely on a parent element to size and arrange their contents
2. Elements that are responsible for sizing and arranging their own contents.

In general, elements in Internet Explorer's HTML engine are not responsible for arranging themselves. A div or a p element may have a position within the source-order and flow of the document, but their contents are arranged by their nearest ancestor with a layout (frequently body). These elements rely on the ancestor layout to do all the heavy lifting of determining size and measurement information for them."

In other words, number 1 describes elements that do not have hasLayout and number 2 describes elements that do have hasLayout.

Here is the important part: What developers have discovered is that giving hasLayout to an element that doesn't inherently have it fixes a number of Internet Explorer bugs, including this white space bug. If an element, such as a paragraph or anchor element, doesn't have hasLayout natively, you can add properties to trigger it. The zoom property is one such trigger. It is a proprietary Internet Explorer property that lets users scale or magnify selected objects. A value of 1 is the default, so adding zoom: 1 to the links DIV in the style sheet will prevent potential hasLayout issues without actually changing anything about the layout. Currently, this is an Internet Explorer only property and using it in your main style sheet would cause page validators to note that you are using invalid code. Rather than add this fix to the regular style sheet, you are going to put it inside an IECC—that is, an Internet Explorer Conditional Comment.

Note: You may wonder why Microsoft added hasLayout to its rendering engine. The most reasonable explanation that I've read is that it is to enhance the performance of Internet Explorer so that the browser doesn't have to figure out size and placement for every page element.

When a browser requires its own custom rules, it would be nice to provide a way to help designers out, right? Microsoft did just that with its conditional comments. If you ever created an if…then statement, or in other words, directed events by specifying "if this condition is in evidence, then we better offer this result", you will get the gist of conditional comments. All they do is tell the browser "if IE [of some version] is present, take some action", or in this case, feed it these special styles.

Conditional comments appear within HTML comments and include a conditional statement—or if statement—that is processed by [a particular version or range of versions of] Internet Explorer. If the browser encounters a conditional comment that applies to its version, then the code within the conditional comment is treated as any other code on the page. This enables developers to serve custom rules to specific Internet Explorer versions. Certain browsers, such as Firefox and Safari, ignore conditional comments altogether. The important thing to remember is that the conditional comment should come after the regular style sheet so that the new values can overwrite the ones you are feeding to other browsers.

A typical conditional comment looks like this:

There are a number of permutations of this for when you want to target specific versions of Internet Explorer. You can even specify a range of versions by using greater than or equal to, less than or equal to, and so on.

If you look in the head of a CSS starter page, you can see a number of conditional comments, including one to fix hasLayout issues in the #mainContent DIV.

Quirksmode.org provides a good explanation of conditional comments.

Note: You will probably notice that there is a conditional comment just for IE 5 that fixes the box model problem in sidebar1. (If you are supporting that older browser, and you make a change to the width of the sidebar1 or its padding or border values, you will need to adjust this value as well.) You will also notice that there is a custom top padding value of 30 pixels. If you want to more accurately balance your h1 and h3 text at the top of the page, you can remove this value from the sidebar1 DIV and also the top padding value in the main style sheet. You can then add top padding to the h1 and h3 rules so that they each have the same amount of space. See the example file in the support_files of the download.

To add the Spry Accordion widget, follow these steps:

1. Cut (use Control+X on Windows or Command+X on Mac OS X) the paragraph of text under the buttons in the sidebar1 DIV.
2. Position the cursor under the buttons.
3. Click the Spry Accordion widget icon in the Spry category of the Insert toolbar (see Figure 26).

Dreamweaver places a Spry Accordion widget on your page with its initial default group of two tabs.

Note: By default, the widget will horizontally fill the entire width of the parent container, which in this case is sidebar1.

4. Click Save. Dreamweaver displays a warning dialog box to notify you that it will add a folder of dependent files (CSS and JavaScript) to your site. You will need to upload this folder to your production server when you upload the page that includes the Spry component.
5. With the widget still selected, access the Property inspector. Click the plus (+) button to add another menu to the Accordion widget (see Figure 27).

Note: You can use the Up Arrow and Down Arrow Keys to change the order of the panels.

Next, add content to the panels. You can select which panel has focus by clicking the eye icon that appears when you hover your mouse over the right side of its tab (see Figure 28).

6. Change the text Label 1 to Atlantic Ocean.
7. Change the text Label 2 to Pacific Ocean.
8. Change the text Label 3 to Indian Ocean.
9. Paste the text you cut in Step 1 from the sidebar1 paragraph into the content region of each panel (see Figure 29). If necessary, use the Property inspector to format the text as a paragraph.

In the SpryAssets folder, locate the SpryAccordion.css file for the Accordion widget and open it. The file contains extensive comments that explain the purpose of each rule.

The steps in this section use the Properties pane of the CSS panel extensively as a quick way to adjust existing properties or to add new ones.

1. Click the plus sign (Windows) or arrow (Mac OS) next to the SpryAccordion.css file in the CSS Styles panel to expand it.
2. Double-cick the first rule, .Accordion.
3. Select the Border category on the left.
4. Change Color for all three borders to #7C9297.
5. Double-click the .AccordionPanelTab rule to edit it.
6. In the Type category, set the Color to white.
7. In Background category, change the Background-color to #00583F.
8. Change the top and bottom border color values to #7C9297.
9. Click OK.
10. Double-click .AccordionPanelContent to edit it.
11. Select the Box category on the left and change Padding to 5 pixels.
12. Double-click .AccordionPanelOpen .AccordionPanelTab to edit it.
13. Change the Background-color to white.
14. In the Type category, set Color to #005B3E.
15. Double-click .AccordionPanelTabHover to edit it.
16. In the Type category, set Color to #AAC7CE.
17. Click OK.
18. Double-click .AccordionFocused .AccordionPanelTab to edit it.
19. Change the background color from turquoise to #00583F.
20. Add white as the Color for text.
21. Click OK.
22. Double-click .AccordionFocused .AccordionPanelOpen .AccordionPanelTab to edit it.
23. Set the background color to white.
24. Add #00583F as the Color for text.
25. Click OK.

That's it! You have a panel that maximizes screen real estate by letting you put multiple pieces of content in one location (see Figure 30).

Figure 31 shows the completed layout. You can continue to tweak the style sheet to your taste

Where to go from here

Now you know how to think in terms of CSS rather than tables to design your pages. You should also understand most of what you see in the code for any of the CSS starter pages.

If you encounter any problems with your CSS or markup while following this tutorial mini series, compare your code with the completed examples included in the tutorial files. You can also study the CSS comments after each property and value in the main.css sample document. CSS comments begin and end with a slash and asterisk combination (/* and */). Commenting is a best practice that helps team members understand each other's thinking. Comments can also remind a solo designer what the purpose of a particular property is six months later.

Another troubleshooting method is to make sure that the page validates for markup, CSS, and accessibility. Checking these critical factors using the free Firefox Web Developer Toolbar quickly reveals problems and gives you clues about how to fix them.

You can also validate your style sheet at the World Wide Web Consortium (W3C) website.

For more information about CSS, visit the CSS topic page in the Dreamweaver Developer Center.