Chapter 3, "Building a Web Page," we discussed the fact that Dreamweaver incorporates two modes of development within its framework. Earlier, I mentioned that Dreamweaver allows you to work in a traditional HTML formatting environment that also incorporates CSS instead of HTML whenever an element from the Properties Inspector is selected for formatting purposes. Out of the box, Dreamweaver attempts to wean developers away from traditional methods of development to a more innovative one in CSS by enabling the Use CSS Instead of HTML Tags option in the Preferences dialog. If you remember, we manually went into the Preferences dialog and disabled the Use CSS Instead of HTML Tags option so that we could discuss the traditional methods up front before moving into CSS. From now on, however, all formatting will be done using CSS. With that said, now would be a good time to revert the Use CSS Instead of HTML Tags option in the Preferences window back to its original state. To do this, choose Edit, Preferences and choose the General category. Enable the Use CSS Instead of HTML Tags check box and click OK to close the Preferences dialog and commit the changes. You won't notice any changes up front, but be aware that significant changes in the way Dreamweaver formats documents and ultimately writes its code under the hood have been made. To prove this point, we'll use the Properties Inspector to format some text just as we've done thus far in the book. To follow along, review these steps: 1. Create a new blank HTML document by selecting New from the File menu. Choose HTML from the Basic Page category and click Create. A new blank page appears. 2. Add the text Welcome to Dorknozzle to the page and highlight it. 3. From the Properties Inspector, change the Font to Arial, Helvetica, Sans-serif.   Obviously, the text changes to Arial right? But this time, notice that the Style menu now includes a new style called style1. When you work in the CSS formatting mode, Dreamweaver creates new classes in a document-wide style sheet for everything. If a style class doesn't already exist for an element you're attempting to modify, a new class with the syntax style<number> is created for you. 4. To see the document-wide style sheet, complete with the class instantiation and the class reference, switch to Code view. As you can see in Figure 7.4, Dreamweaver adds the same code you saw in the sample shown back in Figure 7.1. Figure 7.4. Dreamweaver automatically adds the document-wide style sheet, the class instantiation, and the class reference for you. [View full size image] Of course, the benefit to using Dreamweaver is that we don't have to know how to code HTML or CSS. Instead, we can interact with the windows, panels, and inspectors to run us through the functionality we otherwise would have had to add manually to the code. CSS is no different. To interact with CSS in Dreamweaver, we open the CSS Styles panel (available by choosing the CSS Styles