CSS - @import

The CSS at-rule @import 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.

Possible Values

  • url - 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.

Overview

Following are some points to note while using @import rule:

  • Rules from imported sources must be positioned before all other rule types, except for @charset rules and @layer statements that create layers.

  • The @import rule cannot be nested and therefore cannot be used inside conditional at rules.

  • Authors can use media-dependent import conditions with the @import rule to avoid retrieving resources for unsupported media types.

  • Conditional imports involve media queries by URL; the absence of queries makes the import unconditional.

  • The supports() function in @import helps retrieve resources based on supports() functions, allowing the use of new CSS functions with fallbacks for older browsers.

  • @import can also create or add a cascade layer, interacting with the cascade as if the rules were directly written in the styelsheet.

  • These conditions can be obtained in JavaScript using CSSImportRule.supportsText.

Syntax

@import url | list-of-media-queries

The below syntax demonstrates how to define the URL using both a <string> and a <url()> function.

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

The @import rules demonstrated in the below code specify media-dependent conditions, which must be met for the associated CSS rules to take effect.

@import url("sensor.css") print;
@import url("builder.css") print, screen;
@import "general.css" screen;
@import url("imgpotrait.css") screen and (orientation: potrait);

In the following code, a cascade layer called pages is created, incorporating rules from the imported book stylesheet.

@import "book.css" layer(pages);

In the following code, the rules from both pages.css and units.css stylesheets combine within the same layer as the indexes[chapters] rule.

@import url(pages.css) layer(default);
@import url(units.css) layer(default);

@layer default {
   indexes[chapters] {
   display: block;
   }
}

  • A cascade layer that is declared without a specific name is called an unnamed cascade layer.

  • These unnamed layers are specified at creation; they cannot be modified or extended to include additional styles, and they are inaccessible to external references.

The following code illustrates the creation of two different unnamed cascade layers and the import of linked rules into each.

@import "main.css" layer();
@import "follow.css" layer;

CSS @import - Import External Font Stylesheet

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

  
<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">
      <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>

CSS @import - Import From External CSS

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

 
<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">
      <h1>Welcome to Tutorialspoint</h1>
      <p>This is an example to demonstrate the CSS @import rule.</p>
   </div>
</body>
</html>
Advertisements