Converting Internal Styles to External Styles

Style sheets can be stored externally and linked to one or more documents. An external style sheet is a file that contains only CSS specifications. You can use external style sheets with multiple Web pages to ensure consistency from page to page.

If you have a document with internal styles and you decide you want to use those styles in other pages, you can easily export those styles to an external style sheet.

1.	In the index.html document, choose File > Export > CSS Styles. The Export Styles As CSS File dialog box opens.
2.	In the Save As text field, name your style sheet sangha.css. Save the file in the Lesson_04_CSS folder.

Tip

You don't have to add the extension .css; it's appended to the document automatically upon saving if you don't include it.

An external style sheet is created that contains all of the internal styles existing in the index.html documentincluding those that define the page properties as well as the dayName style and the highlight style.

Note

When you export styles, only internal styles are included in the new document. If there is an external style sheet attached to the document from which you are exporting internal styles, the styles in that external style sheet are not included in the new style sheet.

If you want to use the external style sheet in the document from which you converted internal styles, you should remove the internal style sheet before linking the style sheet, which you will learn to do in the next exercise. Although Dreamweaver enables you to attach an external style sheet with styles that use the same names as those contained in an internal style sheet, you should delete the internal styles to avoid conflict, reduce the amount of code in your HTML document, and reduce the possibility of errors and confusion.

To remove the internal style sheet, scroll up to the top of the list of rules on the CSS Styles panel. Select the internal style sheet which is represented by <style>, which contains all the rules that you've been working with in this lesson. With <style> selected, click the trash icon on the bottom of the CSS Styles panel: the Delete Embedded Style Sheet button. You might have noticed that this button is contextualit changes based on what is selected, whether that is a property, a rule, or an entire style sheet.

You can close the index.html document.