The World Wide Web Consortium provides a website that allows you to validate your CSS code. [View full size image]   The first option allows you to validate your CSS by inputting the full Universal Resource Indicator (URI) of your page. The second option allows you to browse to and select the CSS file on your computer, while the third option simply allows you to write CSS code directly into a text box for validation. To demonstrate this interface, I'll choose the second option. First, I'll browse to and select the styles.css file and click Open. The full path appears in the text box. Now I'll click Check. The web-based application returns the results in the browser (see Figure 7.33). As you can see from Figure 7.33, the validator didn't find any errors. Figure 7.33. The web-based application returns the results of CSS validation. [View full size image]   Using Design-Time Style Sheets Dreamweaver 8 enables you to specify style sheets that are displayed only while you are editing and that aren't included in the web page when it's saved or previewed. For example, you might want to create a style sheet to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page. These are called design-time style sheets. Design-time style sheets apply only while you are working in a Dreamweaver document; when the page is displayed in a browser window, only the styles that are actually attached to or embedded in the document appear in the browser; everything else is ignored. You can create a design-time style sheet the same way you create any other style sheet; however, because these style sheets are intended only for development, you don't have to worry about making them look pretty. The purpose is to make certain things stand out while you're editing. To create a design-time style sheet, follow these steps: 1. Select the New option from the File menu. The New Document dialog appears. Select the CSS option from the Basic Page category and click Create. 2. With the new CSS file open, enter some CSS code so that your document resembles Figure 7.34. Figure 7.34. Enter some code in your new CSS file. [View full size image] 3. Save the new style sheet with the name designtime.css. 4. Switch back to your HTML file. 5. Apply the designtime.css file to your editing environment by choosing the Design Time Style Sheet option from the CSS Styles panel Options menu. The Design Time Style Sheets dialog appears (see Figure 7.35). Figure 7.35. The Design Time Style Sheets dialog allows you to add and manage style sheets that are used only while developing. 6. Add the style sheet by clicking the Add (+) button and browsing to find the designtime.css file. The file appears in the show Only at Design Time list. You can choose to hide specific style sheets while you're developing by adding them to the Hide at Design Time list. 7. Click OK. The design-time style sheet appears in the CSS Styles panel. 8. To demonstrate that these style sheets are visible only at design time, I'll highlight an entire paragraph of text and choose a style from the Style menu in the Properties Inspector. Based on the style I selected, the background of the text is highlighted. 9. Preview your page in the browser. The highlight is not shown.