Home >Web Front-end >CSS Tutorial >Import external stylesheet in CSS
Import external stylesheet in CSS
- 王林forward
- 2023-08-24 12:21:031981browse
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−
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−
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!