@import

  • Revision slug: CSS/@import
  • Revision title: @import
  • Revision id: 20208
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSRef()}}

Summary

@import allows users to import style rules from other style sheets.

Syntax

@import "url";
@import "url" media1, media2, ...;
@import url("url");
@import url("url") media1;

Notes

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI. In the absence of any media types, the import is unconditional. Specifying all for the medium has the same effect.

Examples

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

Specifications

Browser compatibility

See also

{{template.Cssxref("@media")}}, {{template.Cssxref("@font-face")}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>@import</code> allows users to import style rules from other style sheets.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">@import "<i>url</i>";
@import "<i>url</i>" <i>media1</i>, <i>media2</i>, <i>...</i>;
@import url("<i>url</i>");
@import url("<i>url</i>") <i>media1</i>;
</pre>
<h3 name="Notes"> Notes </h3>
<p>So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent <code>@import</code> rules. These conditional imports specify comma-separated <a href="en/CSS/@media#Media_types">media types</a> after the URI.  In the absence of any media types, the import is unconditional. Specifying <code>all</code> for the medium has the same effect.
</p>
<h3 name="Examples"> Examples </h3>
<pre class="eval">@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
</pre>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#at-import">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("@media")}}, {{template.Cssxref("@font-face")}}
</p>
Revert to this revision