CSS: How to Structure an External CSS Document

External style sheets are essentially the same thing as embedded style sheets; the key difference is that no markup exists in a CSS file. When you create an external, independent CSS document, it must be created using the .css file extension.

An external CSS document may contain nothing but CSS rules or comments. A CSS document cannot contain any markup; see how this is done in the following Try It Out.

Try It Out-Linking to an External Style Sheet

Example 2-9. To link to an external style sheet, follow these steps.

1. Enter the following XHTML document:
   
   1. Save the XHTML document as Example_2-9.html.
   2. In a new document, enter the following CSS:

      h1, h2, h3, h4, h5, h6 {
          font-family: sans-serif;
      color: maroon;
      1px solid rgb(200, 200, 200);
      }
      border-bottom:
       

   3. Save the CSS as stylesheet.css in the same folder that Example_2-9.html was saved in.
   4. Load up the document in a browser. You should see output that looks like Figure 2-6.
   How It Works
   The embedded style sheet between the tags has been replaced with an external style sheet by placing the rules inside the embedded style sheet into their own document, saving that document with a .css file extension, and then linking to the new file by including the element in the XHTML document. One of the benefits of an external style sheet is that it allows the same style rules to be applied to as many documents as the author wishes. This is one of the key benefits of CSS-based design. An external style sheet offers flexibility to the author that saves both time and resources.