Home  >  Article  >  Web Front-end  >  Import external stylesheet in CSS

Import external stylesheet in CSS

王林
王林forward
2023-08-24 12:21:031949browse

We can import additional CSS files in another CSS declaration. The @import rule is used for this purpose, it links the stylesheet in the document. Typically used when one style sheet depends on another style sheet. It is specified at the top of the document after the @charset declaration within the

tag.

Syntax

The syntax of the @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 will produce the following output−

Import external stylesheet in CSS

Example

HTML document−

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

CSS Documentation

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;
}

Output

This will produce the following output−

Import external stylesheet in CSS

The above is the detailed content of Import external stylesheet in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete