Skip: [to content] [to navigation]

Skip Navigation

Search Cascading Style Sheets

Inside Cascading Style Sheets

• Cascading Style Sheets Workshop
• Using CSS
• Defining a HTML Tag
• Defining a Page
• Importing an External Style Sheet
• CSS and Dreamweaver
• CSS for Your Use

Quick Links

• Web Design References
• ITSS Training Homepage

In this workshop, we've been moving from a local to global use of style sheets. Local use of a style sheet rule has the highest priority, but global use is more powerful because the rules can be applied to many pages at one time.

Linking to an external style sheet is a two part process initially.

1. make a style sheet
2. link to the style sheet from a Web page

Make a Style Sheet

The external style sheet is its own file. It is independent from all the Web pages. To make this style sheet:

1. switch to your text editor
2. enter the following text
   
   p {font-size:2.0em}


3. save the file as "external.css" in the "CSSExercises" folder

Link to the Style Sheet from a Web Page

This part of the process is similar to creating a style rule within a page as the link is placed before the </head> tag.

1. switch to your text editor
2. go to the "File" menu
3. choose "Open"
4. locate the "CSSExercises" folder
5. open the "CSSExercises" folder
6. open "External1.html"
7. click before the </head> tag
8. enter the following string of text:
   
   <style type="text/css">
<!--
@import url("external.css");
-->
</style>


9. save the file
10. view in your browser

If all went well it should look like "External Rule 1 Example."

"Big deal" you may say. It is a big deal when you apply the same rules to multiple pages.

1. switch to your text editor
2. go to the "File" menu
3. choose "Open"
4. locate the "CSSExercises" folder
5. open the "CSSExercises" folder
6. open "External2.html"
7. click before the </head> tag
8. enter the following string of text:
   
   <style type="text/css">
<!--
@import url("external.css");
-->
</style>


9. save the file
10. view in your browser

Two pages now get their style sheet rule from a single style sheet. Whenever I change the style sheet the other two pages reflect the change. This means I can also:

• affect as many pages as I want with a single style sheet.
• add more rules to the style sheet and know all the affected pages reflect the added rules.
• delete rules from the style sheet and know all the affected pages reflect the deleted rules.

Yes!

Modify the Style Sheet

Now that two pages are linked to the style sheet, let's add some rules.

1. switch to your text editor
2. go to the "File" menu
3. choose "Open"
4. locate the "CSSExercises" folder
5. open the "CSSExercises" folder
6. open "external.css"
7. enter the following text below the <p> rule:
   
   li {font:0.8em verdana,sans-serif}


8. save the file
9. view "External1.html" and "External2.html"

The list items in both pages should now be smaller in font size and a verdana font. If the user's computer does not have verdana installed, the browser will use the default sans-serif family font for that computer.