Creating an External Style Creating an External Style SheetSheet

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Lesson OverviewIn this lesson, you will: Create an external style sheet.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 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?

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

ProjectContinue to work with your Current Event project. Create an external style sheet and a Dynamic Web Template for creating additional Web pages.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 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

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Creating an External Style Sheet1. 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Creating an External Style Sheet1. 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Creating an External Style Sheet1. 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Creating an External Style Sheet1. 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Creating an External Style Sheet1. In the Attach Style Sheet dialog box, click OK

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Creating an External Style Sheet1. 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 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.

Module 5: Beyond the Basics with Expression Web

LESSON 8LESSON 8LESSON 8LESSON 8

Assignment Create your own external style sheet for your Current Event Web

page.