CSS - @import Rule

Quiz

CSS @import rule is used to include style rules from other valid stylesheets. This rule must be placed at the beginning of the stylesheet, before all other at-rule (except @charset and @layer), and before style declarations; otherwise it will be ignored.

Syntax

@import url | string  list-of-media-queries | layer-name;

Property Values

Value	Description
url \| string	It may be a <string>, a <url>, or a <url()> function that specifies the location of it. The URL can be either absolute or relative.
list-of-media-queries	These queries define the conditions under which the CSS rules from the linked URL are applied based on the media type. It consists of a series of comma-separated media queries.
layer-name	It represents the name of a cascade layer into which the content of the linked resource is imported.

Usage of CSS @import Rule

The following snippets show how the @import property has to be used.

@import Rule with String

@import "main.css";
@import "text.css";

@import Rule with URL

@import url("chrome://sport/run/");

@import Rule with Media Queries

//import the css properties of sensor if media is print 
@import url("sensor.css") print;

//import the css properties of builder if  media is print or screen
@import url("builder.css") print, screen;

//import the css properties of general if media is screen
@import "general.css" screen;
@import url("imgpotrait.css") screen and (orientation: potrait);

@import Rule with Layer

// import the content of book.css into the pages layer 
@import "book.css" layer(pages);

// import the content of main.css and follow.css into an unnamed cascade layer  
@import "main.css" layer();
@import "follow.css" layer;

Examples of CSS @import Rule

The following examples explain how to use the @import rule.

@import Rule for Importing External Font

In this example, the @import rule is used to import an external font stylesheet from Google Fonts into the CSS file.

Example

  
<!DOCTYPE html>
<html>
<head>
<style>
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
   body {
      font-family: 'Roboto', sans-serif;
      background-color: #f0f0f0;
      color: #333;
      margin: 0;
      padding: 0;
   }
   .container {
      width: 80%;
      margin: 0 auto;
      padding: 25px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   h1 {
      font-family: 'Arial', sans-serif;
      color: #007bff;
   }
   p {
      font-family: 'Georgia', serif;
      font-size: 20px;
   }
   .custom-text {
      font-family: 'Courier New', monospace;
      font-size: 16px;
      font-weight: bold;
      color: #13cf45;
   }
</style>
</head>
<body>
   <div class="container">
      <h2>
         CSS @import Rule
      </h2>
      <h1>
         Greetings!
      </h1>
      <p>
         This is an example to demonstrate
         the CSS @import rule.
      </p>
      <div class="custom-text">
         Custom Font Style for this text.
      </div>
   </div>
</body>
</html>

@import Rule for Importing From External CSS

In the following example, the @import rule is used to import styles from an external CSS file named imported-styles.css.

Example

 
<!DOCTYPE html>
<html>
<head>
<style>
   @import url('imported-styles.css');
      body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
   }
   .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   h1 {
      color: #007bff;
   }
   p {
      color: #333;
   }
</style>
</head>
<body>
   <div class="container">
      <h2>
         CSS @import Rule
      </h2>
      <h1>
         Welcome to Tutorialspoint
      </h1>
      <p>
         This is an example to demonstrate
         the CSS @import rule.
      </p>
   </div>
</body>
</html>

Supported Browsers

Property
@import	1.0	5.5	1.0	1.0	3.5

css_properties_reference.htm

Print Page