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.
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.
\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.