CSS @import At-Rule

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS @import at-rule, fonts, @-rule, declaration"> <meta name="Description" content="CSS @import at-rule can be used to import a style sheet from another location."> <link rel="canonical" href="https://www.quackit.com/css/at-rules/css_import_at-rule.cfm"> <title>CSS @import At-Rule</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS @import At-Rule</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <p class="lead">The CSS <code>@import</code> at-rule can be used to import a style sheet from another location.</p> <p>Using the <code>@import</code> at-rule allows you to break your style sheet up into smaller parts. This can be beneficial if you have a large style sheet. For example, you could import a style sheet for the navigation, another for typography, another for widgets, etc.</p> <p>The <code>@import</code> at-rule must be at the top of the document (but it can't come before any <a href="/css/at-rules/"><code>@charset</code></a> declaration).</p> <p>Here's an example of an <code>@import</code> rule:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false">@import "navigation.css";</textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>In this particular case I specify the style sheet by using a <a href="/css/data_types/css_string_data_type.cfm"><string></a>. This is equivalent to using the <code>url()</code> function. So the following two lines are equivalent:</p> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">@import "navigation.css";
@import url("navigation.css");</textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>When a style sheet is imported into another style sheet, it is treated as though its contents were written in place of the <code>@import</code> rule. Therefore, its declarations interact with the cascade as if they were written literally into the stylesheet at the point of the <code>@import</code>.</p> <h2>Relative URL vs Absolute URL</h2> <p>The <code>@import</code> rule accepts a <a href="/css/data_types/css_url_data_type.cfm"><url></a> or <a href="/css/data_types/css_string_data_type.cfm"><string></a> to determine the file to import. You can provide this as a relative URL or an absolute URL.</p> <p>The above examples use a relative URL. This means that its relative to the current style sheet's location. So we know that the following example imports a style sheet from the same folder as the current style sheet because we don't provide a path — we only provide the file name. </p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false">@import "navigation.css";</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The following example includes path information, however, it's still relative to the current file: </p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false">@import "../css/navigation.css";</textarea> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The following example includes path information, however, it's relative to the website's root: </p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false">@import "/css/navigation.css";</textarea> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The following example is an absolute URL. It includes the full path, including the domain name: </p> <div class="code-only"> <textarea id="example6" autocomplete="off" spellcheck="false">@import "http://www.example.com/css/navigation.css";</textarea> </div> <script> var exampleCode6 = CodeMirror.fromTextArea(document.getElementById("example6"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Media Queries</h2> <p>The <code>@import</code> rule supports media queries, so you can allow the import to be media-dependent. </p> <p>In the following example, the style sheet will only be imported if the media is print (i.e. the document is printed out, or the user is print-previewing it). </p> <div class="code-only"> <textarea id="example7" autocomplete="off" spellcheck="false">@import "printstyles.css" print;</textarea> </div> <script> var exampleCode7 = CodeMirror.fromTextArea(document.getElementById("example7"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Here are some more examples, to give you an idea of how media queries are written with the <code>@import</code> rule.</p> <div class="code-only"> <textarea id="example8" autocomplete="off" spellcheck="false">/* Printers and "Print Preview" */
@import "printstyles.css" print;

/* Screenreaders and other devices that read out the content */
@import "speechstyles.css" speech;

/* Smaller screens such as on mobile phones */
@import "narrowstyles.css" screen and (max-width: 768px);

/* Larger screens */
@import "widestyles.css" screen and (min-width: 1200px);</textarea> </div> <script> var exampleCode8 = CodeMirror.fromTextArea(document.getElementById("example8"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Official Syntax</h2> <p>The official syntax of the <code>@import</code> rule is as follows:</p> <div class="code-only"> <textarea id="example9" autocomplete="off" spellcheck="false">@import [ <url> | <string> ] <media-query-list>? ;</textarea> </div> <script> var exampleCode9 = CodeMirror.fromTextArea(document.getElementById("example9"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Where the <a href="/css/data_types/css_url_data_type.cfm"><url></a> or <a href="/css/data_types/css_string_data_type.cfm"><string></a> gives the URL of the style sheet to be imported, and the optional <a href="https://www.w3.org/TR/mediaqueries-4/#mq-syntax"><media-query-list></a> (the import conditions) states the conditions under which it applies.</p> <p>If a <a href="/css/data_types/css_string_data_type.cfm"><string></a> is provided, it is interpreted as a <a href="/css/data_types/css_url_data_type.cfm"><url></a> with the same value.</p> <h2>Official Specifications</h2> <ul> <li>The <code>@import</code> at-rule is <a href="https://www.w3.org/TR/css-cascade-3/#at-import">defined</a> in <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a> (W3C Candidate Recommendation, 19 May 2016).</li> <li>Further information about media queries can be found in the CSS <a href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> module (W3C Recommendation 19 June 2012).</li> <li>The <code>@import</code> rule was <a href="https://www.w3.org/TR/CSS2/cascade.html#at-import">defined</a> in <a href="https://www.w3.org/TR/CSS2/">CSS2</a> (Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification — W3C Recommendation 07 June 2011), where it introduced the ability to provide a <a href="/css/data_types/css_string_data_type.cfm"><string></a> to denote the URL of the style sheet, as well as the requirement to place the rule at the beginning of the style sheet.</li> <li>The <code>@import</code> rule was initially <a href="https://www.w3.org/TR/CSS1/#the-cascade">defined</a> in <a href="https://www.w3.org/TR/CSS1/">CSS1</a> (Cascading Style Sheets, level 1 — W3C Recommendation 17 Dec 1996, revised 11 Apr 2008)</li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/at-rules/">CSS @-rules</a></h3> <ul> <li><a href="/css/at-rules/css_bottom-center_at-rule.cfm">@bottom-center</a></li> <li><a href="/css/at-rules/css_bottom-left_at-rule.cfm">@bottom-left</a></li> <li><a href="/css/at-rules/css_bottom-left-corner_at-rule.cfm">@bottom-left-corner</a></li> <li><a href="/css/at-rules/css_bottom-right_at-rule.cfm">@bottom-right</a></li> <li><a href="/css/at-rules/css_bottom-right-corner_at-rule.cfm">@bottom-right-corner</a></li> <li><a href="/css/at-rules/css_charset_at-rule.cfm">@charset</a></li> <li><a href="/css/at-rules/css_counter-style_at-rule.cfm">@counter-style</a></li> <li><a href="/css/at-rules/css_document_at-rule.cfm">@document</a></li> <li><a href="/css/at-rules/css_font-face_at-rule.cfm">@font-face</a></li> <li><a href="/css/at-rules/css_font-feature-values_at-rule.cfm">@font-feature-values</a></li> <li><a href="/css/at-rules/css_import_at-rule.cfm">@import</a></li> <li><a href="/css/at-rules/css_left-bottom_at-rule.cfm">@left-bottom</a></li> <li><a href="/css/at-rules/css_left-middle_at-rule.cfm">@left-middle</a></li> <li><a href="/css/at-rules/css_left-top_at-rule.cfm">@left-top</a></li> <li><a href="/css/at-rules/css_keyframes_at-rule.cfm">@keyframes</a></li> <li><a href="/css/at-rules/css_media_at-rule.cfm">@media</a></li> <li><a href="/css/at-rules/css_namespace_at-rule.cfm">@namespace</a></li> <li><a href="/css/at-rules/css_page_at-rule.cfm">@page</a></li> <li><a href="/css/at-rules/css_right-bottom_at-rule.cfm">@right-bottom</a></li> <li><a href="/css/at-rules/css_right-middle_at-rule.cfm">@right-middle</a></li> <li><a href="/css/at-rules/css_right-top_at-rule.cfm">@right-top</a></li> <li><a href="/css/at-rules/css_supports_at-rule.cfm">@supports</a></li> <li><a href="/css/at-rules/css_top-center_at-rule.cfm">@top-center</a></li> <li><a href="/css/at-rules/css_top-left_at-rule.cfm">@top-left</a></li> <li><a href="/css/at-rules/css_top-left-corner_at-rule.cfm">@top-left-corner</a></li> <li><a href="/css/at-rules/css_top-right_at-rule.cfm">@top-right</a></li> <li><a href="/css/at-rules/css_top-right-corner_at-rule.cfm">@top-right-corner</a></li> </ul> </li> <li> <h3><a href="/css/at-rules/descriptors/">@-Rule Descriptors</a></h3> <ul> <li><a href="/css/at-rules/descriptors/css_additive-symbols_descriptor.cfm">additive-symbols</a></li> <li><a href="/css/css3/properties/css_bleed.cfm">bleed</a></li> <li><a href="/css/at-rules/descriptors/css_fallback_descriptor.cfm">fallback</a></li> <li><a href="/css/at-rules/descriptors/css_font-family_descriptor.cfm">font-family</a></li> <li><a href="/css/at-rules/descriptors/css_font-feature-settings_descriptor.cfm">font-feature-settings</a></li> <li><a href="/css/at-rules/descriptors/css_font-style_descriptor.cfm">font-style</a></li> <li><a href="/css/at-rules/descriptors/css_font-weight_descriptor.cfm">font-weight</a></li> <li><a href="/css/at-rules/descriptors/css_font-stretch_descriptor.cfm">font-stretch</a></li> <li><a href="/css/at-rules/descriptors/css_font-variant_descriptor.cfm">font-variant</a></li> <li><a href="/css/properties/css_marks.cfm">marks</a></li> <li><a href="/css/at-rules/descriptors/css_negative_descriptor.cfm">negative</a></li> <li><a href="/css/at-rules/descriptors/css_pad_descriptor.cfm">pad</a></li> <li><a href="/css/at-rules/descriptors/css_prefix_descriptor.cfm">prefix</a></li> <li><a href="/css/at-rules/descriptors/css_range_descriptor.cfm">range</a></li> <li><a href="/css/at-rules/descriptors/css_speak-as_descriptor.cfm">speak-as</a></li> <li><a href="/css/at-rules/descriptors/css_src_descriptor.cfm">src</a></li> <li><a href="/css/at-rules/descriptors/css_suffix_descriptor.cfm">suffix</a></li> <li><a href="/css/at-rules/descriptors/css_symbols_descriptor.cfm">symbols</a></li> <li><a href="/css/at-rules/descriptors/css_system_descriptor.cfm">system</a></li> <li><a href="/css/at-rules/descriptors/css_unicode-range_descriptor.cfm">unicode-range</a></li> </ul> </li> <li> <h3>Paged Media Concepts</h3> <ul> <li><a href="/css/at-rules/what_is_a_page-margin_box_in_css.cfm">What is a Page-Margin Box?</a></li> <li><a href="/css/at-rules/css_page-margin_properties_list.cfm">Page-Margin Properties List</a></li> <li><a href="/css/at-rules/css_page_properties_list.cfm">Page Properties List</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

CSS @import At-Rule