Step 4: Make an External Style Sheet

There are 3 types of CSS:

1. Internal
2. Inline
3. External --->The best way to use styles is with an External Style Sheet.

If you are coding by hand, create a text file and save it as a .css file. Then the .css file must be linked to the html web page. Use the following link by placing it in the <head> section of each web page to which you would like it attached.

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

However, if you own Expression Web, as most of you do, then the process is different. We just click a few buttons and choose the css page, and so on. Continue reading below.

Create An External Style Sheet (CSS)

Step 1 Click File > New > Page > General > CSS > OK

Step 2 Save it by clicking the save icon, or right-click on the tab that reads "untitled1.css" and choose "save", or File > Save As.

Regardless of how you choose to save a new page, a dialog box will open so that you can name the page. A CSS page can be named anything you desire so long as the extension is .css, which EW will add for you.

Again, EW will automatically add the .css extension for you. But if you want to add it, you can because EW will not add it a second time.

Why create an external style sheet?

The idea behind external style sheets is to create a css style once, place it on the external style sheet, and attach the style sheet (link it) to as many html pages you wish. Then, when you need to update your website, you only make the change once on the CSS Style Sheet and it will be reflected on every page to which the External style sheet is attached.

*It is more Efficient: Because you can create the styles once, then link them to all of your html pages.

*The Separation of Content (html) from Presentation (css) is achieved.

*You make one External Style Sheet, yet you can attach it to hundreds of web pages. Therefore, it is efficient and highly recommended.

*CSS 2.1 is the latest W3C Recommendation, also known as a Web Standard. So if you are looking to create a Standards-Based Web Site, use CSS.

*It also lightens the mark up in your code, and overall, separates content from presentation. (thus, buy using HTML 4.0 (or xhtml) and CSS, you can separate content from presentation, and work more efficiently at the same time.)

Remember: We use CSS to format and position the html or XHTML. In other words, we control every aspect of the appearance of a web page by directly manipulating page elements via style rules. For instance, we use CSS to insert background images, including slices, which permits the designer to enter text directly over the images and graphics. We are able to do his because CSS is not a part of the HTML.

The next step is to attach, or link, the external style sheet to your html pages.

Two Ways To Attach the External Style Sheet

I hope you are beginning to notice a pattern: there is more than one way to accomplish a particular task. Once you find your preference, and establish your workflow, you will start to find yourself becoming quite efficient.

1. Click n Drag: With your html page open in the main editing window, place your cursor on the css page in your folders panel and click n drag it onto the html page. Click the save icon.

2. In the Manage Styles Task Pane in the lower right corner, click on "Attach Style Sheet" > Choose Browse > Choose you style sheet in the popup box, click ok. And ok one more time.

SAVE

Watch the Video: How to Create an External Style Sheet

What's Next

Designing the Web Page: The Layout

Expression Web Tutorial

A Place For Beginners

CSS Tips of the Week

Expression Web & CSS