Learn CSS: Introduction to Inheritance, Specificity, and Cascade - Importing Style Sheets
(Page 3 of 4 )
The @import CSS rule is supported only by modern browsers as a way to import CSS rules from a style sheet to the HTML document, or to another style sheet. It's supported by Microsoft Internet Explorer 5.5 and 6, Mozilla 1.7 and Opera 7.5. Save the following CSS rule to a CSS file (p.css):
body
{
font-family: Arial;
font-size: 1.1em;
}
div
{
color: white;
background-color: black;
height: 30px;
}
Now we will import the styles of the p.css file to the HTML document through the use of the @import rule:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Structure</title>
<style type='text/css'>
@import url(p.css);
</style>
</head>
<body>
<div>
This is a div element with an inline style
</div>
</body>
</html>
The @import rule's url can be written as url(file path) or url "file path" and it must be followed with the semicolon. It's written between the opening <style> and closing </style> tags too. Because the @import rule is not supported by older browsers, it can be used as a way to hide the CSS styles too. Anyway, you can include your embedded styles after the @import rule.
Suppose that we need to set a yellow 2px solid border to the div element of the document, but because we will not need this border for any other div elements in this HTML document or other documents, we will not include the border style in the p.css file, though we will include it in the Style tag of the HTML document. In this way you can have a style sheet file that contains the common styles that you need for the HTML documents, and you can add other styles that are specific to the document by using the Style tag.
Actually, the same thing can be accomplished by using the <link> element instead of the @import rule. However, @import has one more use, besides the fact that the @import rule is included inside the <Style> Tag, as we will see shortly. So let's see the code. We will not make any changes to the p.css file, but we will add the border style to the HTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Structure</title>
<style type='text/css'>
@import "p.css";
div
{
border: 2px solid yellow;
}
</style>
</head>
<body>
<div>
This is a div element with an inline style
</div>
</body>
</html>
There's one more use for the @import rule. You can import styles from one style sheet to another. This is a very important point when it comes to cascade, so for now I will give you a very basic example until we get to the cascade examples. For the next example, we need three CSS files (Primary.css, Secondary.css and Secondary2.css). We will place one rule in each file for simplicity.
Place the following rule in the Secondary.css file:
div
{
color: white;
background-color: black;
height: 30px;
}
The next rule goes in the Secondary2.css file:
div
{
border: 2px solid yellow;
}
Finally, place the following code in the Primary.css file:
@import "Secondary.css";
@import "Secondary2.css";
body
{
font-family: Arial;
font-size: 1.1em;
}
You need to replace the <Style> tag with the following <link> element in the HTML code:
<link rel="stylesheet" href="Primary.css" type="text/css">
Browse the Web page, and here is what you will get:
This is the same as the previous example; the difference is that we placed each rule in different style sheets and imported them to the Primary.css style sheet by using the @import "Secondary.css" and @import "Secondary2.css" rules. This is very similar to listing all the rules in one style sheet and referring to it from the HTML document.
You may ask, so why I would create more than one style sheet while we can create only one? Let's just wait until the cascade section, and you will figure it out. The @import rules must be listed in the first part of the style sheet and before any other rules, so if you placed the CSS rules before the @import rules as in the following code
body
{
font-family: Arial;
font-size: 1.1em;
}
@import "Secondary.css";
@import "Secondary2.css";
you would not get the expected results. Only the CSS rules in the style sheet would be applied, and there would be no import for styles from the other style sheets. So in our example only the font-family and the font-size would be applied to the HTML document, as in the following figure:
Now let's discuss the inheritance concept in CSS.
Next: CSS Inheritance >>
More Style Sheets Articles
More By Michael Youssef
/ 16 
