From table-based to tableless web design with CSS – Part 1: CSS Basics

Everyone is urging you to make the switch from table-based layouts to tableless, CSS-positioned layouts. You've certainly been thinking about it, but CSS layouts seem so unintuitive. You've established a workflow with tables that, well, works. Why should you change? After all, browsers will always render tables, and you understand their methods and issues. All you have to do to get a design grid is fill out the Dreamweaver table dialog box. Would that it were so easy with CSS! Well, it can be—Dreamweaver includes CSS starter pages that provide a kind of CSS alternative to the table dialog box.

Part 1 of this tutorial gently guides you through the transition from tables to CSS, and demonstrates how in many ways CSS layouts are easier. You'll learn the basics of CSS layouts and see that there are many equivalencies between table and CSS concepts.

In Part 2 you'll learn to work with CSS starter pages as you convert a table-based design to a pure CSS design. You'll even get to add some "wow factor" to the design by using a Spry Accordion widget in the page.

Before you build the Yacht Club design shown in Figure 1, however, you'll learn about the advantages of the CSS approach. You'll also learn a few techniques that you can use to replace old school methods. Once you master a few core concepts, you will understand what goes on underneath the hood of most of the CSS starter pages.

Tables seem so easy because we're familiar with the concept quite apart from web page design. Most of us used Excel spreadsheets or Word tables before we tried to put together our first web pages. The idea of putting content in cells seems intuitive. Still, though tables work well for data, there are disadvantages to using them for layout, a purpose they were never intended to fulfill.

I remember a few years ago when I was called in to advise a company that purchased a Dreamweaver template that had been designed with tables. There were many row and column spans to this carefully constructed house of cards. The problem started when the webmaster tried to make edits to various cells. If the new content made the heights of the cells vary too much from the originals, the construction started to fall apart. Size adjustments in one cell affected surrounding cells. Gaps appeared between images that were supposed to be precisely aligned. Perhaps table designs are not really that easy after all. In CSS layouts, the building blocks have more independence. There are many other advantages as well:

• Separation of content and presentation: The content goes into the HTML document and the design goes into the CSS document. It is easier to read the code, both for you as you work and also for the browser as it renders the page.
• Portability to other media: The simpler code and separate style sheets allow you to easily port pages over to print, screen readers, mobile devices, and other media.
• Lower page weight: When browsers can download the style sheets once and apply them repeatedly to multiple pages, the pages download much more quickly and reduce the burden on the server.
• Quicker redesigns: Because just the content and basic elements are in the HTML document, it is easy to redesign by simply switching to a new style sheet. For a famous example of one HTML document that is presented in hundreds of ways with the swap of the style sheet, see CSS Zen Garden.
• More possibilities: With more independent building blocks and the potential to break outside of the box, CSS layouts open themselves up to more creative treatments.

The same and different

It is always best to start with what you know, and surprisingly, there are quite a few commonalities in the table and CSS approaches to layout. Tables and CSS layouts start with the same raw material. Consider the simple page shown in Figure 2, which could provide the basis for either a table-based or CSS-based layout.

The raw material of this simple page includes features that will be common to both kinds of layouts:

• Headings, links, images, paragraphs, and other HTML elements provide the foundation for page content.
• HTML elements appear on the page as either inline or block; that is, they stack either horizontally or vertically. Examples of block elements are headings and list items. Once the content in the heading or list item is rendered, the space next to it remains free, and no other element fills that space. Examples of inline elements are characters of text, images, and links. Once an inline element is complete, the next element you insert will sit right next to it.
• Elements have a natural flow. The text, images, links, headings, and other elements appear on the page in the order that you insert them. They flow across the page, wrapping to the width of the user's browser window.
• HTML elements appear as they do (such as heading sizes and fonts) because each browser provides base style sheets. You need to work with, or around, these base style sheets in either layout approach.

This simple page represents what the web looked like a long time ago before designers figured out ways to manipulate the natural flow of an HTML document. In order to give pages more visual interest, designers first thought inside the box by using tables as grid structures for their content. With CSS positioning techniques, however, they finally got to think outside the box. CSS layouts still use building blocks, but these boxes enjoy more independence from one another. The structure is less rigid, and the creative possibilities are positively liberating!

Before beginning work with any design, you should define a new site in Dreamweaver. Many people skip this step and then lose out on much of the power of Dreamweaver (such as updating links when you change a file name in the Files panel).

1. Create a new folder named yachts and save it anywhere you like (for example, to My Documents, the Sites folder, or the Desktop).
2. Download the sample files for this article, unzip them, and copy them to the new folder.
3. In Dreamweaver, choose Site > New Site.
4. Select the Advanced tab in the Site Definition dialog box.
5. Select the Local Info category on the left.
6. For the Site Name, type Yachts (see Figure 3).
7. Next to the Local Root Folder field, click the folder icon.

8. When the browse dialog box displays, navigate to the Yachts folder you created in Step 1.
9. Click OK.

Dreamweaver will process the site and display the files in the Files panel.

In this exercise, you'll learn how to replace HTML attributes for aligning, clearing, and spacing images with the CSS properties float, clear, and margin.

1. Open simple_page_start.html.
2. Locate the sailboat image and note that it appears at the baseline of the first line of text.

   Images are, by default, inline elements and flow next to other adjacent inline content. You're now going to use the float property to wrap the text around the image.

3. Locate the CSS Styles panel. Depending on which workspace you are using, it will appear with text or an icon. If it is not on your monitor screen, you can find it by choosing Window > CSS Styles.
4. Click the plus button at the bottom (shown in Figure 4) to create a new CSS rule.

5. For the Selector Type, select Class (Can Apply To Any HTML Element) as shown in Figure 5. The class selector begins with a period (stop), and can be used on as many objects on the page as you like. So if, for example, you had multiple images on the page that you wanted to wrap text around, you could apply this one class to all the images.
6. For the Selector Name, type .leftimage (don't forget the period at the beginning).
7. Choose to have your new rule defined for "This document only". Many designers develop their pages by first embedding the styles in the head of the document, and then later, after the layout is complete, export the styles to an external style sheet.
8. Click OK.

9. When the CSS Rule Definition dialog box appears, select the Box category.
10. Select Left as the Float setting.
11. Deselect the Same For All check box under Margin.
12. Type 8 for both the Right and Bottom margins.
13. Leave the unit of measurement at pixels (see Figure 6).

14. Click OK.
15. Click the image on the page to select it.
16. Select the newly created leftimage class from the Class popup menu in the Property inspector (see Figure 7)

Now you know how to wrap text around an image by using the float property. If you wanted to place the image on the right and the text on the left, you could create a class and set the float property to right.

Using the clear property

But what do you do when you want to stop the wrapping effect? What if, for example, you wanted the "Sail to the Bahamas" heading and its paragraph to display under the sailboat image? This is a job for the clear property.

1. Click the plus button at the bottom of the CSS Styles panel to create a new rule.
2. When the New CSS Rule dialog box appears, select Class as the Selector Type.
3. In the Name field, type .clearfloat (don't forget the starting period!)
4. Select the option to have the rule defined in "This document only".
5. Select the Box category.
6. For the Clear setting, select Both.
7. Click OK.

   By using both instead of left, the same class can be used for right or left floated images. Now you need to apply this new class.

8. Click anywhere inside the h2 text "Sail to the Bahamas" to select it.
9. In the Property inspector, select the clearfloat class as the Class (see Figure 8).

In the first exercise, you learned how to replace the image align HTML attributes with the CSS float property. Before you explore how to use the float property to create side-by-side columns, you'll learn another replacement technique: replacing table cells with CSS boxes, more technically known as DIVs. The DIV element is a generic box in which you can insert content, just like you did in cells! The difference is that the DIV has some semblance of independence, unlike the more tightly interrelated table cells. In this next exercise you will create boxes to divide the page into discrete areas. You will give each of these boxes a name that describes its function and meaning in the document. For example, the top DIV is named "header" because it includes header information. Giving each area of the page a descriptive name conforms to the web standards concept of the semantic web.

1. Locate and open create_div_start.html from your defined site.
2. Click somewhere within the "Luxury Yachts" heading text to select it.
3. In the tag selector in the status bar at the bottom of the Document window, click the <h1> element to select it (see Figure 9).

4. Locate the Insert panel. If you do not see it on screen, choose Window > Insert to make it visible.
5. Select the Common category of the Insert panel if it is not already selected (see Figure 10).
6. Click the Insert Div Tag icon. Depending on which workspace you are using, you may not see text that describes the icon.

7. In the Insert Div Tag dialog box, type header for the ID (see Figure 11). Note that you are using an ID instead of a class. In the image floating exercise you used a class, which can be used multiple times on one page. IDs must be unique and you can only use them once per page. Because each area of the page will be unique, the ID is the appropriate choice.

8. Click OK.

Dreamweaver adds a dashed line around the area that now falls within the DIV or division of the page. The line is just a visual effect to help you see where each DIV on the page lies. You will not see this line in your browser. (If you do not see the dashed line, you may have turned off the CSS Layout Outlines under the Eye icon in the Document toolbar.)

If you were to look at the code for the new DIV, you would see that the heading is nested inside a "box" much like a table cell:

1. Place your cursor anywhere in the line of link text.
2. Select the p element in the tag selector at the bottom of the page.
3. Select the Insert Div Tag icon in the Common category of the Insert panel.
4. In the Insert Div Tag dialog box, type sidebar in the ID field (see Figure 12).

5. Click OK.

Next you will switch to Code view so that you can select multiple elements. The header and sidebar were easily selectable in the tag selector because there was one parent element in each, an h1 and a p. The content region will have an image, an h2, and multiple paragraphs. The most reliable way to select everything from the opening tag of the first element to the closing tag of the last element is to make the selection in Code view.

1. Click Code View at the top left side of the Document window.
2. Locate the first paragraph of text that includes the image code. Select everything from the opening p tag to the closing p tag right before the footer text. Refer to Figure 13 to help you make your selection.

3. Click Design View at the top left side of the Document window to return to Design view.
4. Click the Insert Div Tag icon in the Common category of the Insert panel.
5. In the Insert Div Tag dialog box, type mainContent in the ID field.
6. Click OK.

Finally, you'll add a DIV around the footer paragraph.

1. Place your cursor anywhere within the footer text.
2. Click the p element in the tag selector at the bottom of the Document window.
3. Click the Insert Div Tag icon in the Common category of the Insert panel.
4. In the Insert Div Tag dialog box, type footer in the ID field.
5. Click OK.

Your page is now divided into four separate boxes (the header, sidebar, mainContent, and footer DIVs) that you will use with CSS to manipulate the layout. Dreamweaver gives you visual cues for recognizing where each DIV is located (see Figure 14).

This tutorial covers two models for creating side-by-side columns, and the advantages and disadvantages of each. The first model will use absolute positioning on the sidebar DIV. You have used absolute positioning if you ever created a design with the Draw Layer or Draw AP box features in Dreamweaver.

Make sure your CSS Styles panel is open. If you do not see it on screen, choose Window > CSS Styles.

Start by putting each link in the sidebar in its own paragraph:

1. Use the completed file from the previous exercise, or open absolute_start.html from the sample files for this tutorial.
2. Click after the first link labeled Home.
3. Press the Return key. This will place the next link on its own line.
4. Repeat these steps to place each link in its own paragraph (see Figure 15).

5. Click the new rule icon at the bottom of the panel. The New CSS Rule dialog box is displayed.
6. Select ID (Applies To Only One HTML Element) as the Selector Type.
7. For the Selector Name, type #sidebar. This is the same name that you gave the DIV in the HTML page. The properties you set in the new CSS rule will directly affect the sidebar.

   Note: ID names always begin with the number sign, and must be unique on the page.

8. Define the rule in "This document only" (see Figure 16). Assume that you will always use this option from now on.

9. Click OK and the CSS Rule Definition dialog box opens.
10. Select the Positioning category on the left.
11. Select Absolute as the Type.
12. Type 150 in the field next to the Width menu, and choose pixels (the default) as the unit of measurement.
13. Under Placement, type 60 as the Top setting.
14. Choose pixels (the default) for the unit of measurement.
15. Type 15 as the Left setting and again make sure pixels is the default unit of measurement (see Figure 17). The values for top and left are in relationship to the body, which is the parent container of the sidebar DIV.

16. Click OK.

You will probably be surprised at the result that appears in Design view in the Dreamweaver document window (see Figure 18). The content area now covers the navigation list. An absolutely positioned DIV is taken out of the natural flow of the document and placed at precise coordinates. The other content no longer "sees" it. You will fix this in the next part of the exercise.

1. Click the New CSS rule button.
2. When the New CSS Rule dialog box opens, type the name #mainContent and choose the ID selector type. (Again, note that the ID begins with the number sign and must have a unique name.)
3. Click OK and the CSS Rule Definition dialog box will open.
4. Select the Box category on the left.
5. Under Margin, deselect the Same For All checkbox so that it is empty. You want to apply a unique margin to the Left field.
6. Type 175 for the Left value, and make sure pixels, the default unit of measurement, is selected (see Figure 19).
7. Click OK.

The result should look much better to you (see Figure 20). You carved out a 175-pixel margin for the 150-pixel-wide sidebar DIV to slip into, with 25 pixels extra for a gutter between the DIVs.

This is a fairly effective method for creating the look of side-by-side columns. One of its advantages is that the absolutely positioned DIV can be anywhere in the HTML source code, thus allowing you to increase the accessibility of the page for those using screen readers.

There are, however, some problems. You may have encountered one of them if you ever used the Draw Layer/Draw AP DIV feature in Dreamweaver. Absolutely positioned elements have a certain rigidity about them. If the user increases the text size, the contents might spill out of the box (see Figure 21). If all the DIVs in a design are absolutely positioned, such as happens when the designer draws layers for each area, the user may see overlapping elements that make the page nearly unusable.

There is another potential problem that limits what you can do with the design. As long as the content column is longer than the sidebar column, the footer will appear below both columns and all will be well. If the sidebar column is longer—as it might be if some text were added underneath the links—then the footer will overlap it (see Figure 22). Just as the mainContent DIV did not see the absolutely positioned sidebar DIV, so too will the footer DIV be unaware of its existence.

There are certainly instances where absolutely positioning elements is a good strategy, but you should consider other approaches for most of your work.

Floats are the second method for creating side-by-side columns, and they provide the flexibility to make either column longer than the other. Floated elements, however, must come before the element they are going to float next to in the source order. So in this example, because the sidebar DIV is going to be floated, you must make sure it is in front of the mainContent DIV.

1. Open float_columns_start.html.
2. Create a new ID rule, and name it #sidebar div.
3. This time, instead of the Positioning category, select the Box category.
4. For the Width, type 150 and leave the default unit of measurement at pixels. (Floats should have an explicit width or they will shrink to the width of the content within them.)
5. For the Float option, select Left (see Figure 23).

6. Click OK.

Now the sidebar DIV is floated to the left of the content DIV. However, you'll notice that once the navigation list reaches its end, the mainContent DIV wraps around it (see Figure 24). The default behavior for floats is that the elements that follow wrap around them. The mainContent DIV sees and makes space for the sidebar DIV, but there isn't really a true two-column look. You can fix this by again carving out a left margin space on the content DIV.

7. Create a new ID named #mainContent in the CSS Styles panel.
8. Select the Box category on the left.
9. Deselect Same For All under Margin.
10. Enter a value of 175 pixels for the Left margin.

The look of two columns is now back (see Figure 25).

You will remember that you achieved the same results by using absolute positioning in the previous exercise. By using a float instead, however, you can allow either column to be longest without overlapping the footer DIV. In the next steps you will put that into action.

The file from the previous exercise should still be open.

1. Copy the first paragraph in the content DIV by choosing Edit > Copy or by pressing Control+C (Windows) or Command+C (Mac OS X) on your keyboard.
2. Put your cursor after the last link in the sidebar DIV.
3. Press the Return key.
4. Paste the paragraph you just copied by choosing Edit > Paste or by pressing Control+V (Windows) or Command+V (Mac OS X) on your keyboard.

The extra text in the left column is still breaking through the footer DIV, though not through the footer text (see Figure 26). Think back to the image floating exercise. The image was taller than the paragraphs next to it, and the h2 crept up to wrap around the image. Elements wrap around floats unless they are cleared. And that is exactly what you need to do to solve this problem.

Note: There is a potential problem you might encounter when floating columns. Remember the h2 element with the clearfloat class on it? It was added to prevent the h2 text from wrapping around the image. If it existed in this exercise page, it would clear the floated sidebar column in addition to the h2 text. The h2 text would then drop down below the last content in the sidebar! There are ways to code around this problem, but they involve more advanced techniques that control the block formatting context. You can read more about this topic and solutions to the problem in an article by Zoe Gillenwater.

5. Place your cursor anywhere in the mainContent DIV.
6. Select <div#mainContent> in the tag selector at the bottom of the document window. This selects the entire content area.
7. Press the Right Arrow key once.
8. Click the Split button in the Document toolbar so that you see both code and design views.
9. In Code view, type the following after the closing DIV for the content region, but before the opening DIV for the footer: <br class="clearfloat" />. You can use the Dreamweaver Code Hint feature to help you quickly type out the code (see Figure 27).

Note: Since you are using the default XHTML Transitional 1.0 doctype in Dreamweaver, it is important to add the space and forward slash before closing the element. For example: <br class="clearfloat" />. You can read more about doctypes at Community MX.

You already created the clearfloat class in the image floating exercise, so as soon as you return to Design view, the effect should be immediately apparent (see Figure 28). The footer clears the sidebar column!

You're now going to add a few more properties and values to the clearfloat class. You may remember reading at the beginning of this tutorial that all pages are subject to a browser style sheet before you add even one rule of your own. Many browser style sheets add dimensions to a br element, thus adding space to the page that you may not want. Since the br element is there solely to provide a hook for clearing a float, you do not want it to have any height. Let's now add some values to prevent that potential problem.

1. Delete the paragraph you inserted under the links in the sidebar.
2. Double-click the clearfloat rule in the CSS Styles panel to open it for editing. Alternatively, you can select it and then click the pencil icon at the bottom of the panel.
3. Select the Type category on the left.
4. Set the font Size to 1 (pixel).
5. Set the Line Height to 0.
6. Select the Box category on the left.
7. Set the Height to 0.
8. Set the Margin (all sides) to 0 (see Figure 29).
9. Click OK.

By making sure that the browser doesn't add any height, margin space, or line-height, and by setting the size of fonts to only 1 pixel—giving it that tiny size to prevent the br from collapsing all together—you ensure that the break does the job of clearing the float without distorting the design with any unexpected dimension.

There are various methods you could have used to clear the image, but this way gives you a reusable widget that you can apply whenever you need to clear an element. It is also the method that is used in the CSS starter pages.

Just as with table cells, you can add background colors to DIVs. In this step, you'll add background colors to the header, sidebar, and footer. Start with the header and footer:

1. Click the plus button at the bottom of the CSS Styles panel to create a new rule.
2. Select the ID selector type.
3. Name the rule #header.
4. Click OK.
5. Select the Type category on the left.
6. Set Color to white.
7. Select the Background category on the left.
8. For the Background Color, type #0E2D63.
9. Click OK.
10. Click the plus button to create another rule.
11. Select the ID selector type.
12. Name the rule #footer.
13. Click OK.
14. Select the Type category on the left.
15. Set Color to white.
16. Select the Background category on the left.
17. For the Background Color, type #0E2D63.
18. Click OK.

The new header and footer colors are shown in Figure 30.

Adding background color gets trickier with the sidebar DIV, however. Early on designers identified a problem with CSS layouts. Because of how DIVs work, it seemed impossible to get the look of equal-height column layouts—especially equal-height columns with background colors or images—that are so easy to achieve in table-based designs. To see what I mean, let's add a background color to the sidebar.

1. From the CSS Styles panel, double-click the sidebar rule to open it for editing.
2. Select the Background category on the left.
3. Type #AAC7CE as the Background Color.
4. Click OK.

If you look at the greenish background color behind the left sidebar column in Figure 31, you'll notice that as soon as the last link displays, the background color ends. A DIV's height extends only as long as there is content inside it.

The time-honored way to address this is to use the faux column technique. This involves nesting the existing DIVs inside a parent DIV. (You may have used nesting techniques to accomplish design goals when you worked with tables.) You can then tile an image on the vertical axis of this parent DIV. It won't matter which column is longest, because whenever one of them grows, the entire parent container DIV grows to contain them both. The background image on the container DIV gives the illusion that the sidebar column has a solid block of color that extends all the way down to the footer.

You'll nest all the divisions into a container DIV. This is a bit like carrying all your travel items in a suitcase rather than trying to juggle them all in your hands. Why, it is even a bit like using a table with multiple rows and columns inside!

By putting all the DIVs into one container DIV, you gain more control over many aspects of your layout as you'll soon see.

1. Click <body> in the tag selector at the bottom of the Document window. This selects everything on the page.
2. Click the Insert Div Tag icon in the Common category of the Insert toolbar.
3. In the Insert Div Tag dialog box, type container as the ID.
4. Click the New CSS Rule button in the Insert Div Tag dialog box to create the rule while you create the new DIV (see Figure 32).

5. When the New Rule dialog box opens, it should be filled out correctly with ID as the Selector Type, #container as the name, and This Document Only as the rule definition scope. Click OK.
6. When the CSS Rule definition dialog box displays, select the Background category.
7. Next to the Background-image field, click the Browse button.
8. Navigate to the images folder for the site.
9. Select the container_bg.jpg image (see Figure 33).

10. Select repeat-y for the Background-repeat option (see Figure 34).

    HTML has only one background option, and that is to tile both horizontally and vertically on the page. CSS has four repeat options—you can tile on the x-axis or y-axis, not repeat at all, or tile in all directions like the HTML model.

11. Select the Box category.
12. For the Width type 780 and leave pixels as the default unit of measurement.

    It is a "best practice" to try to avoid horizontal scrollbars. If you assume your "lowest common denominator" is a screen resolution of 800 by 600, you can set the width of a layout somewhere between 720 to 780. This will leave room for the browser chrome, or sides of the browser viewport.

13. Deselect Same For All under Margin.
14. Type 0 for the Top and Bottom margins.
15. Select auto for the Right and Left margins (see Figure 35).
16. The World Wide Web Consortium (W3C) provided the auto value for purpose of centering block elements. Its page on the Visual Formatting Model states, "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal." This horizontally centers the element with respect to the edges of the containing block.

You now have the shell of the layout completed. Your result should look like Figure 36.

You're probably wondering why there are gaps between the header and the top of the container and the footer and the bottom of the container in Dreamweaver Design view. If you are using a browser like Safari or Firefox, you will see these same oddities in the interaction between the container DIV and the header and footer.

You're seeing the effect of margin collapsing. Remember that before you add even one rule to your style sheet, the browser has provided a basic default style sheet that adds things like margin, padding, border, font, and font size to some elements, such as headings and paragraphs. Most browsers, for example, add about 20 pixels of top margin and 20 pixels of bottom margin space for paragraphs. If there are two adjacent paragraphs, the 20 pixels of bottom margin for the first and the 20 pixels of the top margin for the next would add up to 40 pixels—way too much! The W3C instead states that the 40 pixels should collapse into just 20 pixels, with one paragraph's margin escaping into the other.

In the case of the h1 and p text in the header and footer, default browser margins are escaping outside their DIVs into the container DIV. There are a number of ways to fix the escaping margin effect. One is to zero out the top or bottom margin of the element. Adding a small amount of padding or a border are other ways to correct the problem.

Note: Many designers zero out some of the default styling that the browser adds to the layout at the beginning of their style sheets. Different browsers add different values for the various elements, so zeroing them out also gives the design a level starting point. You can then add your own values with the expectation that they will look consistent everywhere. A common practice is to begin a style sheet with a rule such as the following:

1. Click the plus button at the bottom of the CSS Styles panel to create a new rule.
2. Select Tag as the contextual selector type. Tag selectors allow you to redefine the look of an HTML tag.
3. For the Selector Name, select h1, or type it in yourself (see Figure 37).

4. Click OK.
5. Select the Box category on the left.
6. Deselect Same For All under Margin.
7. Type 0 for the Top margin.
8. Click OK.

This fixes the gap between the header and the container. Fixing the gap between the footer and the container will require a slightly more complex selector. Because you don't want to remove the bottom margin from every paragraph on the page, you will target only the paragraph in the footer DIV.

When you redefine a tag (like you just did with the h1 tag), you are making global changes, changes that would affect every instance of that element on the page. Because you have only one h1 on the page, this is not a problem.

But what if you wanted paragraphs to look one way in the mainContent DIV and another way in the footer DIV? Or what if you wanted links to be one color in the mainContent DIV and a different color in the sidebar DIV? This would be a good job for the descendant selector. As the name implies, this creates a selector that is a descendant of another page element. Returning to the paragraph example, you could create a paragraph style that only applies to paragraphs when they are in the footer DIV of the page. You would start with the footer ID name, add one space, and then type p. For example:

You could also create a separate paragraph style for the mainContent DIV:

In the following steps, you will add a descendant selector for the paragraph in the footer DIV.

1. Click the plus button at the bottom of the CSS Styles panel to create a new rule.
2. Select Compound as the Selector Type.
3. For the Selector, type #footer p.
4. Define the rule for This Document Only (see Figure 38).

5. Click OK.
6. Select the Box category on the left.
7. Deselect Same For All under Margin.
8. Type 0 for the Bottom margin.
9. Click OK.

If you look at the page now, you will see that the gap between the footer DIV and the bottom of the container DIV is now gone (see Figure 39).

Before you conclude Part 1 of this tutorial, add a finishing touch—after all, the devil is in the design details! As the design stands, the text is very close to the left edge of the container. The h1 text in the header, the links in the sidebar, and the text in the footer could all use a little space on the left side. Because the design will look more professional if all three text elements have the same amount of space, it makes sense to make a CSS rule that applies to all three at once. In the next steps, you will use the compound option to create a group selector.

1. Click the plus button to create a new rule.
2. In the New CSS Rule dialog box, select Compound as the contextual selector type (see Figure 40).
3. For the name, type #header h1, #sidebar p, #footer p.

4. Click OK.
5. Select the Box category on the left.
6. Deselect Same For All Under Padding.
7. For the Left padding, type 20 and leave pixels as the unit of measurement.
8. Click OK.

The results are shown in Figure 41.

Note: In Part 2 of this tutorial, you'll learn more about the use of padding, margins, and borders as you explore the box model.

Where to go from here

In this part of the tutorial about making the transition from tables to CSS layouts, you learned quite a bit about the basics of CSS, including how to:

• Use common selector types: Class, ID, Tag, and Compound (Descendant and Group selectors)
• Float and clear images
• Insert DIVs to organize a page into regions
• Use absolute positioning to create columns
• Float to create columns
• Clear columns
• Use the faux column technique, a common method for creating an equal-height, two-column layout with header and footer
• Center layouts by using auto values for margins
• Fix margin collapsing

It may seem like you went through a lot of steps just to get the basic shell of the Yacht layout, but Adobe doesn't expect you to reinvent the wheel every time you start a new layout. Dreamweaver provides CSS starter pages for all the common layout permutations in its New Document dialog box. These CSS starter pages use the basic methods you learned in this tutorial. The starter pages can help you save time, but they lack images, navigation schemes, and other finishing touches. In Part 2 of this tutorial, you will use a CSS starter page to design the Yacht Club layout.