@import

Article
10/10/2017

Imports an external style sheet.

Syntax

@import [url] (sUrl );

Possible values

sUrl

String that specifies the URL that references another cascading style sheet.

Remarks

The rule has no default value.

The semicolon in the syntax is required; if it is omitted, the style sheet is not imported correctly and an error message is generated. The url() parameter is optional because there is always a URL following @import.

The @import rule, like the link element, links an external style sheet to a document. This helps the web author establish a consistent look across multiple HTML pages. Whereas the link element specifies the name of the style sheet to import using its href property, the @import rule specifies the style sheet definition inside a link element or a style element.

The @import rule should be placed at the top of a style sheet, before any declarations. Although @import rule statements can appear anywhere within the style sheet definition, the rules contained within the @import rule style sheet are applied to the document before any other rules defined for the containing style sheet are. This rule order affects expected rendering.

Rules in the style sheet that contains an @import rule override rules in the imported style sheet.

Examples

The following examples use the @import rule to import a style sheet. For the example to work, you must replace URL in the example code with the address of a style sheet:

<style type="text/css">
    @import url("URL");
    p {color:blue}
</style>

The following example, without url(), has the same effect as the preceding example:

<style type="text/css">
    @import "URL";
    p {color:blue}
</style>

Standards information

This rule is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee371239.xtlink_newWindow(en-us,Expression.40).png .