@import

Summary

Imports an external style sheet.

Examples

The following example uses 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 previous example.

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

Notes

Remarks

The rule has no default value. The semicolon in the syntax is required; if omitted, the style sheet is not imported properly and an error message is generated. "url()" 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 attribute, the @import rule specifies the style sheet definition inside a link element or a style element. In the scripting model, this means the owningElement property of the style sheet defined through the @import rule is either a style or a link object. The @import rule should occur at the start of a style sheet, before any declarations. You can place @import rule statements anywhere within the style sheet definition, but the rules contained within the @import rule style sheet are applied to the document before any other rules defined for the containing style sheet. This rule order affects expected rendering. Rules in the style sheet override rules in the imported style sheet.

Syntax

@import

Parameters

sUrl

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

Related specifications

CSS Cascading and Inheritance Level 3

W3C Working Draft

CSS 2.1, section 6.3

W3C Recommendation

See also

Related articles

CSS Layout

• Responsive Web Design

• @import

• align-self

• background

• box-decoration-break

• box-flex

• box-lines

• box-orient

• box-pack

• box-shadow

• break-before

• flex-align

• flex-item-align

• flex-line-pack

• grid-auto-rows

• grid-definition-columns

• grid-definition-rows

• height

• max-width

• user-modify

• baseline-shift

Syntax

• @charset

• @font-face

• @import

• @keyframes

• @namespace

• @page

• @supports

• CSS reference

• Alphabetical list of CSS reference

• !important

Related pages

• importsimports
• :link:link
• stylestyle
• styleSheetstyleSheet

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]