External Style Sheets

External style sheets are defined separately from the HTML code, in a separate file. The browser takes the HTML and the CSS, combines them, interprets them, then shows us the final result. For example, if you have three web pages, all three of these pages can refer to the same external style sheet.

all of the styles have disappeared; you only see text

The great advantage to this type of arrangement is that you don't have to re-type all of your styles if you want the same styles to appear on multiple pages. All you have to do is create a link in your HTML document to your style sheet.

Ways of Linking to External Style Sheets

There is more than one way to link to external style sheets, but in general these ways fit under two categories:

The <link> method:

A link to a style sheet using a <link> element would look something like this:

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

This line of code would be placed somewhere between the opening and closing <head> elements. It does not matter if you type it before or after the <title> element.

The @import methods:

The @import methods, using the <style> element, would also be placed between the opening and closing <head> elements, and would look something like this:

<style type="text/css">
  <!--
    @import url(styles.css);
  -->
</style>

Note: The opening and closing comment tags  are optional, but they help to make the document more compatible with older browsers which cannot interpret styles at all. Older browsers will ignore the opening and closing <style> tags, but would not ignore the content between them, so we comment it out. Modern browsers can interpret the styles whether the comment tags are present or not.

There is more than one @import method to import style sheets. Both of the following examples will also import the styles into the HTML document, despite their minor syntax differences from the first example above.

@import with parentheses and quotation marks:

<style type="text/css">
  <!--
    @import url("styles.css");
  -->
</style>

@import without parentheses, but with quotation marks:

<style type="text/css">
  <!--
    @import "styles.css";
  -->
</style>

Which Method is Best?

All of the methods mentioned above are acceptable, but browser compatibility is a concern. Modern browsers are able to read all of the above methods, but older browsers cannot. In the case of Netscape 4, for example, the browser understands the <link> method, but does not understand the @import methods. If you want styles to show up in Netscape 4, you have to use the <link> method. However, the problem with Netscape 4 is that it supports only a few style properties. Sometimes this can lead to pages that look horrible in Netscape 4 because only some of your styles are displaying properly while others are being completely ignored, as shown in the partial screen shot below.

the text overlaps itself in strange ways in this example, making it hard or impossible to read

In these cases, it would be better if all of the styles failed, because you would at least be able to see the plain HTML version of the page, even if it's not as snazzy as the styled version. One way to ensure that all of the styles fail is to use one of the @import methods of linking to the style sheet. The end result will be a web page that "looks right" in all of the modern browsers, and a page that is at least still readable in older browsers such as Netscape 4, even though it looks plain and boring.

In general, I recommend using the @import methods because it's usually too much of a bother—or else completely impossible—to make styles work properly in Netscape 4.x and other older browsers. Which @import method is best? It doesn't really matter, though I tend to prefer the one with parentheses but no quotation marks.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.