Call Customer Support
1.866.363.5633 

Quick Start Checklist

• Checklist Overview
• 1.  Style Application
• 2.  Setting Up a Web Site
• 3.  Set the Doctype
• 4.  Blank Web Page
• 5.  External Style Sheet
• 6.  Designing a Web Page
• 7.  Dynamic Web Template

 

 

Video Tutorials

• Getting Started Videos
• Contact Form Videos
• Expression Design 3 Videos
•   

CSS & HTML Tutorials

• All About CSS
• HTML Overview
•  FAQs

 Training DVDs & Products

• DVD Sets

 

 

 

 

Expression Web 3 Tutorials for Beginners

Step 4:  Make an External Style Sheet

Recall, if you will, that External Styles are placed on an External Style Sheet.  This is one way we can use CSS Styles. ( Refer to the 3 Types of CSS to refresh your memory. ) 

 

External Styles are the preferred way to create Styles because we can reuse these styles simply by linking the External style Sheet to any number of web pages.

 

How an External Style is Written

If you take a look at an External Style Sheet, you will see how the styles are written:

#container {    
   width: 900px;    
   margin: 0 auto;
}

 

See Anatomy of a Style Declaration

 

How to Create an External Style Sheet in Expression Web 3

As usual, there is more than one way we can create an External Style Sheet.  I am only reviewing one of those ways for the sake of simplicity.

1. Click File

2. Hover over New

3. Choose Page

4. When the dialog box opens, choose General in the left column

5. Choose CSS in the middle column

6. Click OK.

7. Now click the save icon and name the style sheet mainstyles and press Enter. 

The style Sheet will be given a .css extension automatically.

 

Next, Link the Style Sheet to the Web Page

In order for the CSS Styles to work, we must link or attach the External Style Sheet to the Web Page.  There are two different ways we can accomplish this. 

1.  The Quick n Easy:  Make sure your index.html web page is open in the main editing window of Expression Web 3.  Now go to the Folder list Panel and look for your Style Sheet.  Click and drag your Style Sheet from the Folder List and drop it on top of the index.html web page.  Finish up by clicking the save icon.

 

Below is how the link to a style sheet is written:

<link href="main.css" rel="stylesheet" type="text/css" />

 

The name of my Style Sheet in the above example is main.css.

You do NOT have to write this code.   This is the code that is written for you when you click and drag your style sheet and drop it onto the web page.

 

2.  The second way to attach a Style Sheet is reviewed in the Video Tutorial.  But, in a nutshell, click Attach Style Sheet, which is located on the Manage Styles Panel. 

 A dialog box will open:  click Browse and locate your style sheet in the next window that opens.  Click on your style sheet to choose it, then click OK.  And one more time, click OK.  Then click the Save icon.

 

 

Watch the Video:  Making an External Style Sheet

 

 

Quick Tip:  An External Style Sheet is really just a text file saved with a .css extension.

 

Step 5:  Style Application Mode 

 

Bookmark this on Delicious