Linking External Style Sheets
We recommend the use of external style sheets. By just changing one or two style sheets, you can change the look and feel of an entire site consisting of hundreds of pages.
To link an external style sheet to your pages, place the following code between the <head> </head> tags:
<link rel="stylesheet" href="name.css" />
However, advanced CSS can wreak havoc with Netscape 4.x, so you might want to hide the Style Sheet from Netscape 4.x. In that case, you should use the following code:
<style type="text/css">
<!--
@import url("name.css");
-->
</style>
Using the above code hides CSS from Netscape 4.x.
It is not uncommon to use a style sheet for Netscape 4 and another style sheet for standards aware browsers, as we have done on this site. In such a case, many developers use code similar to the following:
<link rel="stylesheet" href="ns4.css"
type="text/css" />
<style type="text/css">
<!--
@import url ("advanced.css");
-->
</style>
As long as the @import code is placed after the link code, the @import styles should take precedence. However, there are some potential problems with this approach. Advanced browsers load both style sheets, and that can increase page download times. Also, advanced browsers may encounter conflicts between styles specified in the two sheets. If you're a Dreamweaver user, you can avoid those potential problems by downloading the free Style Sheet Loader extension from Project VII.