CSS | @import rule

The @import rule is used to import one style sheet into another style sheet. This rule also support media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration. 

Syntax:

@import url|string list-of-mediaqueries;

Property Values:

• url|string: A url or a string represents the location of the resource to be imported. The url may be relative or absolute
• list-of-mediaqueries: The list of media queries condition the application of the CSS rules defined in the linked URL

Example: Consider the two CSS files as shown below.

• icss.css

@import url("i1css.css");
h1 {
 color: #00ff00;
}

• i1css.css

h1 {
 text-decoration: underline;
 font-size:60px;
}

p {
 padding-left: 20px;
 font-size: 60px;
}

Link the first CSS file icss.css in the below HTML file and see the output. 

Output:

 👁 Image
 

Supported Browsers:The browsers supported by @import rule are listed below:

• Google Chrome 1 and above
• Edge 12 and above
• Firefox 1 and above
• Safari 1 and above
• Opera 3.5 and above