Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS | @import rule

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 23 Aug, 2022
Improve Article
Save Article

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. 


@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;

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

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


<!DOCTYPE html>
    <link href="icss.css" rel="stylesheet">
    <p>A computer science portal for geeks</p>



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
My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!