Importing External Style Sheets in CSS

CSS Web Development Front End Technology

We can import additional CSS files inside another CSS declaration. The @import rule is used for this purpose as it links a stylesheet in a document. This is generally used when one stylesheet is dependent upon another. It is specified at the top of the document after @charset declaration inside <head>.

Syntax

The syntax of @import rule is as follows

@import /*url or list-of-media-queries*/

The media queries can be compound statements which may specify the behavior of the document in different media.

Example

The following examples implement the @import rule −

HTML document −

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
   background-color: honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

CSS document: style.css

p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; }

Output

This produces the following output −

Example

HTML document −

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>

CSS document−

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid blueviolet;
   box-shadow: 22px 12px 3px 3px lightblue;
   position: absolute;
   left: 30%;
   top: 20px;
}