Skip to content
Related Articles

Related Articles

CSS | @import rule
  • Last Updated : 07 Jan, 2019

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.






<!DOCTYPE html>
<html>
<head>
    <title>WebPage</title>
    <link href="icss.css" rel="stylesheet">
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p>
</body>
</html>                    

Output:

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

  • Google Chrome
  • Internet Explorer 5.5
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :