Define the Styles and Apply Them as You Create the Page

A far more common approach is to generate the CSS styles (or link to an existing external style sheet) independently of the content as you are developing it.

Actually, our sampler page is one approach to use for creating a style sheet: the page doesn’t contain real data, and you can quickly make general decisions about appearance. Even if you use a sampler page, however, you will undoubtedly encounter design needs along the way.

Export any existing styles into an external style sheet:

1. Open sampler.htm and duplicate the page by choosing File > Save As.
2. Save the file as sampler_external.htm in the CSS test site.
3. Choose File > Export > CSS Styles.
4. In the Export Styles as CSS File dialog box, save what will be a CSS file as css_sampler.css.
5. Although a CSS file has been created containing all of your styles, those same styles also still exist in the head of your document. Launch the CSS Styles panel by choosing Window > CSS Styles.
6. In the CSS Styles panel, you will see <style> and the existing styles may or may not be visible indented underneath. This listing includes all of the styles included in the internal style sheet. Select <style> in the CSS Styles panel and click the Delete CSS Style icon in the bottom right of the panel (it looks like a trash can).
7. Although the page suddenly looks ugly—and the style code has been removed from the head of sampler_external.htm—the class attributes are still written to the code where those classes were assigned.
8. Still in the CSS Styles panel, click the Attach Style Sheet icon.
9. Within the Attach External Style Sheet dialog box, click the Browse button and locate the css_sampler.css file you exported in step 4. Click OK, then OK again to return you to the page.
10. Note that the page returns to the same appearance, including the table cell and the paragraph of text to which you applied the class styles. The CSS Styles panel now says css_sampler.css instead of <style>.
11. Switch to Code view and note that all style code has been removed from the head of the document with the exception of a link tag, which points to the css_sampler.css file.