CSS | @import rule

Last Updated : 23 Aug, 2022

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.

html

<!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 1 and above
Edge 12 and above
Firefox 1 and above
Safari 1 and above
Opera 3.5 and above

C

chaitanyashah707

Improve

Article Tags :

Similar Reads

A link is a connection from one web page to another web page. CSS property can be used to style the links in various different ways.States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo-

CSS counters allow you to number elements like lists or sections automatically. They are "variables" maintained by CSS, and their values can be incremented with CSS rules, tracking how many times they are used. To work with CSS counters, we use a set of properties:counter-reset: Creates or resets a

CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typographyKey Properties of CSS FontsTo customize fonts effectively in web design, itâ€™s crucial to understand

CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe

CSS Multiple Columns

CSS Multiple Columns is a property used to divide content into multiple columns, similar to a newspaper layout. It improves readability and organizes content efficiently across different screen sizes.Key Properties of CSS Multiple ColumnsBelow is a list of essential CSS properties for working with m

CSS Attribute Selector

CSS attribute Selector allows you to select elements based on the presence, value, or specific characteristics of their attributes. They are particularly useful for dynamic or structured content where attributes play a key role, such as in forms or data tables.Types of CSS Attribute Selectors1. [att

CSS units define the size of elements, with absolute units (like px, cm) having fixed values and relative units (like em, rem, %, vh) depending on factors like the viewport or parent elements. There are two types of units: Absolute and Relative.Absolute unitsAbsolute units in CSS, such as px, cm, an

CSS Pseudo Elements

A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or :

CSS Height and Width

Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim

CSS Layout - Horizontal & Vertical Align

The Layout in CSS is used to control the flow of element inside another element. It sets the position of element in the web page. The position of element can be set by using horizontal and vertical alignment. There are many ways to set the position of element which are listed below: Using Position P