- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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>
To Continue Learning Please Login
Login with Google