@Import





@Import

The LINK element is HTML's way of linking to external style sheets. CSS also has a way of importing external style sheets that offer some of the same functionality:


<STYLE TYPE="text/css">

  @import url("http://www.w3.org/StyleSheets/Core/Steely");

</STYLE>


Because there always comes a URL after @import, you can safely drop the url( ) notation. The following example therefore has the same effect as the previous one:


<STYLE TYPE="text/css">

  @import "http://www.w3.org/StyleSheets/Core/Steely";

</STYLE>


As used in the previous examples, @import doesn't offer any benefits over using the LINK element. One example from W3C illustrates how using @import can make your life easier. Along the way, you learn more about how W3C produces specifications for the Web.

Using @Import: A Case Study

W3C publishes technical specifications. A specification normally starts out as a Working Draft in one of several Working Groups inside W3C. Working Drafts are available to W3C Members and, most often, to the public. When the Working Group considers it ready, the specification becomes a Proposed Recommendation. If the W3C Members consider the specification worthwhile, it is thereafter turned into a Recommendation.

For W3C, it's important to convey at what stage a specification is in. A Working Draft is often immature and is mostly made available for discussion purposes. A Recommendation, on the other hand, is an industrial-strength specification that W3C actively promotes. Style sheets are a good way to visually communicate at what stage a specification is at. For example, by using an informal font for Working Drafts, the style sheet communicates that the draft is subject to change:


@import "W3C-specifications.css";

BODY { font-family: cursive }


In this example, most of the style settings are found in the imported style sheet. However, the rule on the second line overrides any font-family setting on the BODY element inside the external style sheet. The more mature documents can be given a more formal font. For example, the style sheet for Proposed Recommendations might say:


@import "W3C-specifications.css";

BODY { font-family: sans-serif }


While W3C Recommendations, which are the ultimate rubberstamp W3C will use, may have this code:


@import "W3C-specifications.css";

BODY { font-family: serif }


The benefit of organizing your style sheets into hierarchies like this one is that you can easily make changes to large sets of documents. For example, by changing the base style sheet (W3C-specifications.css), you can change the color and background for all three types of specifications.

The examples in this case study are fictional – the style sheets in use by W3C are slightly more complex.

@Import: The Details

You always write the @import declaration as the first declaration in the STYLE element. The local rules follow, as the following example shows, and override any conflicting rules in the imported style sheet:


<STYLE TYPE="text/css">

  @import "mystyle";

  H1 { font-style: palatino, sans-serif }

  P { color: blue; background: white }

</STYLE>


You can import any number of external style sheets using @import by inserting multiple @import declarations, each with the URL of a style sheet.

Importing multiple style sheets can result in a tier of style sheets. This is because an imported style can have its own @import declarations, which point to style sheets that may also have @import, and so on. The order of the declarations is significant. Each additional level of @import has a lower priority in case of conflicting rules; that is, style sheets that are imported later override those imported earlier. So, you should place your primary style sheet(s) first and follow with supplementary style sheets included for specialized purposes.

You can use @import declarations in a modular fashion to customize your documents. For example, you may have style sheets as separate files that define different background images, methods for handling tables, default fonts, and special kinds of paragraphs and lists. Then, in any particular document, you can use @import to pull in the appropriate style sheets to create the desired effect. For example:


<STYLE TYPE="text/css">

  @import "basics";

  @import "list-styles";

  @import "headings";

  @import "smaller-headings" print;

</STYLE>


Notice the word "print" after the last @import statement in this example. Remember how the MEDIA attribute on the LINK element was used to declare media-specific style sheets? You can do the same on @import by adding the media types after the URL. If more than one media type exists, there should be commas between the keywords:


<STYLE TYPE="text/CSS">

  @import "bigger-headings" screen, projection;

  @import "smaller-headings" print, handheld;

</STYLE>


If no media types are specified, imported style sheets apply to all media types.


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows