Dreamweaver supports both CSS and table-based layouts, so before we begin creating styles with Dreamweaver we need to be sure it's set up correctly to use CSS.

Open the Preferences panel by clicking Edit > Preferences in the top-most menu bar.

screen shot of general preferences panel

In the General category, look at fifth and sixth settings under Editing Options.

The fifth setting determines the markup that text which is bolded or italicized from the Properties panel will receive. This is a Web Standards issue rather than a CSS issue, but I strongly recommend that you check this box -- remember that the <b> and <i> tags have been deprecated, and browsers are no longer required to support them.

You should also check the sixth box, as we want to use CSS styles instead of HTML tags for styling.

Click OK to register your choices.

Now open the Preferences panel again, and click on the Code Format category.

screen shot of Preferences panel

Click OK to register your choice.

Reopen the Properties panel one last time, and click on the CSS Styles category.

screen shot of CSS preferences panel

CSS allows you to group a number of closely related values (such as values for border width, border color, and border style) into a single rule, called a shorthand rule. I don't recommend using shorthand for your CSS rules as some browsers will not process the styles in shorthand rules the way you intend, so please don't check these boxes.

Now look at the last set of choices on the page; they determine how you will edit your CSS styles. I realize we haven't seen the CSS panel yet, but I would recommend that CSS beginners choose the Edit using CSS dialog radio button. After using that selection for a while, try switching to the Edit using Properties pane and see which one you prefer. Experienced CSS users might prefer editing in the Edit using Properties pane or in code view.

After making your choice, click OK, and we can begin!

* click the link below to read the next tutorial *
Styling Tags