Import external stylesheet in CSS-CSS Tutorial-php.cn

Import external stylesheet in CSS

王林

Release： 2023-08-24 12:21:03

forward

1921 people have browsed it

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*/

Copy after login

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>

Copy after login

CSS Document: style.css

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

Copy after login

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>

Copy after login

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

Copy after login

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!