1. Creating an External Style Sheet Module 5: Beyond the Basics with Expression Web LESSON 8

2. Module 5: Beyond the Basics with Expression Web LESSON 8 Lesson Overview In this lesson, you will:  Create an external style sheet.

3. Module 5: Beyond the Basics with Expression Web LESSON 8 Guiding Question:  In Module 3, you learned that one of the principles of design is repetition. One way to incorporate repetition in a Web site is through consistency.  What tool did you learn about in Module 2 that can help a designer create consistency between several pages of a site?

4. Module 5: Beyond the Basics with Expression Web LESSON 8 Project Continue to work with your Current Event project. Create an external style sheet and a Dynamic Web Template for creating additional Web pages.

5. Module 5: Beyond the Basics with Expression Web LESSON 8 Why use an External Style Sheet?  Saves time for the designer  Employs the design principle of repetition between pages of a Web site  Defines styles to be used across multiple Web pages  Style remains consistent between the pages of the Web site

6. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. Click on the File menu and point to New and choose CSS  A blank page will open but DO NOT add anything to this page.

7. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. Click on the File menu and choose Save. 2. In the Save As dialog box, enter the name of your style sheet followed by.css. 3. Click Save.

8. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. Use the File Tabs or the Folder List to navigate to your homepage (index.html). 2. Click Attach Style Sheet in the Apply Styles or Manage Styles task panes.

9. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. In the Attach Style Sheet dialog box, click the Browse button. 2. In the Select Style Sheet dialog box, find the name of the newly created style sheet and click Open.

10. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. In the Attach Style Sheet dialog box, click OK

11. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. In the Manage Styles task pane, click on the first style. 2. Hold down the Shift key while clicking on the last style.

12. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating an External Style Sheet 1. Drag all the selected styles to the newly named css category. 2. Save the work by clicking on File and Save. 3. In the Save Embedded Files dialog box, click OK.

13. Module 5: Beyond the Basics with Expression Web LESSON 8 Creating New Web Pages Using the External Style Sheet  Additional pages can be styled with a style sheet for a consistent look and feel throughout the site.  Web designers use templates to create additional Web pages.  Sections of the template can be reserved for new text or other images to be added to the Web page.  These types of Web page templates are called Dynamic Web Templates.

14. Module 5: Beyond the Basics with Expression Web LESSON 8 Assignment  Create your own external style sheet for your Current Event Web page.