Using @import To Call Your CSS Files
The "@import" rule was introduced due to Netscape Navigator 4.x
As Netscape at the time didn't support all of the CSS syntax that was available there were always problems with layouts not working correctly in their browser. A workaround was introduced using the "@import" rule. The idea behind this rule is to create two separate CSS files, one which included CSS syntax that was understandable by all browsers and one that had the CSS syntax in it that wasn't understood by the Netscape Navigator.
As the "@import" rule was not readable for NN4.x it overlooked the code and read only the standard rules that were provided.
The example below shows how this would work:
Example:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="default.css" type="text/css" />
<style type="text/css">
@import url("notnn4.css");
</style>
</head>
<body>
</body>
</html>
In our example you can see that we are using both the "External CSS" function and a modified "Embedded CSS" function.
We call our "default.css" file via the "external CSS" function and our style sheet that has information in it that is not correctly implemented by NN4.x is called via the "embedded CSS" function.
If you don't need or you want to ignore the NN4.x browser then you can either use the standard <link> tag to access your style sheet or you can use the "@import" rule to bring in your style sheet(s).
Using @import for multiple Style Sheets
If you have a website that is very extensive and requires a considerable amount of styling then you can cut corners by using the "@import" rule to import multiple cascading style sheets.
When using multiple Cascading Style Sheets it is to be noted that the CSS syntax is only used when it is required.
Using the following example you can use the <link> tag to link to multiple CSS files and they will be pulled in when the HTML file is opened in the browser. This clutters your code and delays loading times (dependant on file size).
Example:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Integration of Multiple CSS Style Sheets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="file1.css" type="text/css" />
<link rel="stylesheet" href="file2.css" type="text/css" />
<link rel="stylesheet" href="file3.css" type="text/css" />
<link rel="stylesheet" href="file4.css" type="text/css" />
<link rel="stylesheet" href="file5.css" type="text/css" />
</head>
<body>
</body>
</html>
The easier way to apply multiple files is to use the "@import" rule (browser support dependant). In our example we import "main.css" which calls in multiple files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
Example:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>
CSS File "main.css" Contains The Following Syntax:
@import "file1.css";
@import "file2.css";
@import "file3.css";
@import "file4.css";
@import "file5.css";