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 CODE:
<!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 CODE:
<!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";
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 CODE:
<!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 CODE:
<!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";
| Website Design | Website Design Company | Web Development Get a beautiful website design. Studio Web is a results oriented web design & online marketing firm serving companies worldwide. |
Sponsored Link |
