How to Build an External Style Sheet

External style sheets, also known as cascading style sheets, or CSS, are a useful tool if you have a website with many pages. You can apply consistent styles across many web pages by defining them in one CSS file. This saves you work if you need to change the look and feel of a website. You only have to make changes in one file instead of several files. To take advantage of using external style sheets for your website, follow these steps.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Computer with Internet access
• HTML editor software
• Web browser

1. Open an HTML editor or Notepad software program. Create a new text document with a .css extension. Name the file, "style.css" and save it. This file is the external style sheet.

2. Open the web page or pages where you want to apply the style sheet. Link the web pages to the cascading style sheet. Put the following "link" tag between the "head" tags of the web page such as:
   
   
   
   
   

3. Define the styles for various elements of a web page. Cascading style sheets use a three part syntax: a selector, property and value. The following style code defines styles for the body, headers and paragraph in a web page.
   
   body {background-color: blue}
   
   h1 {font-size: 30pt}
   
   h2 {color: black}
   
   p {margin-left: 40px}

4. Copy and paste the style code you created into the style.css file and save it.

5. Upload the style.css file and the web pages that are linked to the css file to the web server. Make sure these files are in the same directory.

6. Open a web browser and load the linked web page or pages to test the style sheet. If the pages are linked properly, the defined styles in the external style sheet display in the web pages.

Tips & Warnings

• Be aware that large size external style sheets increase page download time. Be selective with styles you decide to use. The style sheet has to be completely loaded before the page displays.

Who Can Help:

• eFax is the world’s #1 Internet fax service.  Send and receive faxes by email and kiss your fax machine goodbye. 30-Day Free Trial

Resources

• Visit the W3 Schools website to learn css style definitions and syntax.