Home arrow Style Sheets arrow Page 3 - Learn CSS: Introduction to Inheritance, Specificity, and Cascade
STYLE SHEETS

Learn CSS: Introduction to Inheritance, Specificity, and Cascade


We are still discussing the basic concepts of CSS. In this article (and the next part) we will talk about how the structure of the CSS document can affect Web page design. Actually, there's something that I haven't discussed until now, which is what are the places that we can use to write styles and how it can affect the Web page. This is also related to the cascade, inheritance and specificity concepts which help you to understand how to structure your CSS document. This article is the ninth in a series covering CSS.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 21
July 18, 2005
TABLE OF CONTENTS:
  1. · Learn CSS: Introduction to Inheritance, Specificity, and Cascade
  2. · The Style Tag
  3. · Importing Style Sheets
  4. · CSS Inheritance

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials