How to Build an External Style Sheet

Using CSS Site Wide

Web designer working in her studio
Web designer working in her studio. Nicola Tree/Getty Images

Advantages and Disadvantages of External Style Sheets

One of the best things about Cascading Style Sheets is that you can use them to keep your site consistent. The easiest way to do this is to link or import an external style sheet. If you use the same external style sheet for every page of your site, you can be sure that all the pages will have the same style.

Advantages of External Style Sheets

  • You can control the look and feel of several documents at once.
    This is especially useful if you work with a team of people to create your Web site. Many style rules can be difficult to remember, and while you might have a printed style guide, it is inefficient and tedious to be continuously flipping through it to determine if example text is to be written in 12 points Arial font, or 14 point courier.
  • You can create classes of styles that can then be used on many different HTML elements.
    If you often use a special Wingdings font to give emphasis to various things on your page, you can use the Wingdings class you set up in your style sheet to create them, rather than defining a specific style for each instance of the emphasis.
  • You can easily group your styles to be more efficient.
    All the grouping methods that are available to CSS can be used in external style sheets, and this provides you with more control and flexibility on your pages.

Disadvantages of External Style Sheets:

  • External style sheets can increase the download time if they are extremely large.
  • If you only have a small number of styles, they can increase the complexity of your site.
  • Like with table rendering, you have to wait until the entire style sheet is loaded before the page can display.
  • External style sheets get big very quickly as it's hard to tell when a style is no longer in use because it's not deleted when the page is removed.

    How to Create an External Style Sheet

    External style sheets are created with a similar syntax to document level (in the

    ) style sheets. However, all you need to include are the selector and the declaration (see Using Style Sheets for more information). Just like in a document-level style sheet, the syntax for a rule is:

    selector {property : value;}

    Save these rules into a text file with the extension .css. This isn't required, but it is a good habit to get into, so you can immediately recognize your style sheets in a directory listing.

    Once you have a style sheet document, you need to link it to your Web pages. This can be done in two ways:

    1. Linking
      In order to link a style sheet, you use the HTML tag. This has the attributes rel, type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. For example:
    2. Importing
      You would use an imported style sheet within a document level style sheet so that you can import the attributes of an external style sheet while not losing any document specific ones. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. For example
      You can import as many external style sheets as you need to maintain your Web site.