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.
@import url("i1css.css");
h1 {
color: #00ff00;
}
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
Last Updated :
23 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...