Colored boxes - Step 9. Taking out the CSS
When you are completely happy with the layout across all target browsers, you can take the CSS out of the head of the document and place it in an external style sheet. There are two methods of linking files to style sheets:
Linked style sheet
This is the general style sheet that is seen by all CSS-supporting browsers. Almost all rule sets will be placed here.
<link rel="stylesheet" href="stylesheet1.css" media="screen">
@import style sheet
This is the advanced style sheet. As older browsers do not recognize "@import", you can use this simple hack to hide rules (or entire style sheets) from older browsers. There are a number of ways to code the "@import" to hide styles from particular browsers including:
@import url("../stylesheet.css");
@import url(../stylesheet.css);
@import url(../stylesheet.css) screen;
@import "../stylesheet.css";
We will use the version below as it hides CSS from Netscape 4.x, Win IE 3, Win IE 4, Mac IE 4.01 and Mac IE 4.5. The main browser we are focusing on is Netscape 4.x.
<style type="text/css" media="screen">@import url("stylesheet2.css");</style>
