| You now have an external style sheet with multiple style definitions. Because it is external, you can use this file with other documents by linking it to the Web pages in which you want the style definitions to be applied or made available to. You will need to manually apply any classes to the appropriate paragraphs or selected text. Later in this lesson you'll learn to develop styles that redefine HTML tags as well as create contextual selectorsboth style types will be applied automatically to all documents that have the style sheet attached. Note IDs, which can be created using the CSS Selector Styles type, are not automatically applied to documents when external style sheets are attached.
1. | Open the index.html file from the Lesson_04_CSS/about folder.
Note Text content has been added to this page and formatted using the techniques that you learned in the previous lessons. For additional practice, you can import the text content from the about.txt document in the Lesson_04_CSS/Text folder and format it to match the document you're using in this exercise. This page has no internal or external styles.
In the following steps, you will link this document to the external style sheet that you created in the previous exercise from the internal styles in the index.html document. This linking will ensure that the text formatting is consistent between both pages.
Note For the formatting to remain consistent as you continue to develop styles you would need to remove the internal styles from the definitions.html document and follow the steps in this exercise to attach the external style sheet. Using external style sheets will ensure that all documents linked to those style sheets will continually reflect any modifications to the styles that those external style sheets contain. You can leave the definitions.html document as-is for this lesson or work with it as suggested here for additional practice. | | | 2. | Click the Attach Style Sheet icon located at the lower-right of the CSS Styles panel.
 The Attach External Style Sheet dialog box opens.
 Note Dreamweaver includes a number of predesigned CSS you can use in your own Websites. To use one of these style sheets, click the sample style sheets link at the bottom of the Attach External Style Sheet dialog box. Select the style sheet you want to use from the Sample Style Sheets dialog box and click OK. You can use these style sheets as-is or use them as a starting point to develop your own. Clicking Cancel from the Sample Style Sheets dialog box returns you to the Attach External Style Sheet dialog box. If you are proficient in writing HTML and know how to write CSS, you can create a CSS page from scratch by choosing File > New and selecting the CSS document type from the Basic Page category on the General tab. A new document opens, in which Code view is the only available viewing mode. For more information about CSS, choose O'REILLY CSS Reference from the Book menu on the Reference panel located in the Code panel group to learn more about CSS elements. Use the Style menu to choose CSS terms and read their descriptions. You'll work with the Reference panel more in Lesson 15.  | | | 3. | Click Browse and locate the sangha.css file that you created at the beginning of this lesson. Select the style sheet by clicking Choose (Macintosh) or OK (Windows) on the Select Style Sheet File dialog box. Verify that the Link option is selected from the Add As section of the Attach External Style Sheet dialog box and click OK.
|
The external style sheet sangha.css is now linked to the index.html document. The page now reflects the formatting attributes that are specified in the external style sheet. You'll immediately see the effectsthe link colors will become the same as those that you set in Lesson 3, the background color will switch to the pale yellow that you set earlier in this lesson, and the default page font will switch to the font that you selected, also earlier in this lesson. The Link option was selected by default because is the first time that you are attaching a style sheet to the index.html document. The Import option for attaching a style sheet does not work in Netscape Navigator 4.x; that browser ignores any style sheets that are attached using Import. Given the cascading nature of style sheets, the second style sheet has priority and overrides any conflicting styles in the first sheet. Likewise, a third style sheet overrides any conflicts in the first and second sheets. The process of using multiple style sheets is known as cascading. A technique often used in consideration of Netscape 4.x users is to place all styles that are not compatible with that browser into subsequent style sheets that use the Import option. That way, Netscape 4.x uses only the styles in the first style sheet; it is not affected by styles that might conflict or cause errors because it ignores style sheets linked with the Import option. Imported styles contained within subsequent style sheets can then override those created for older browsers in the first sheet. |
