Posted By
Bajarangi soft ,
Posted On 09-10-2020
Is it possible to include one CSS file in another?
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.
Example 1:
HTML section: File name is index.html
<!DOCTYPE html>
<html>
<head>
<!-- linking css file with html file -->
<link rel="stylesheet" href="style1.css">
</head>
<body>
<center>
<marquee><h1>Bajarangi Soft</h1> </marquee>
<div class="css1">Bajarangi Soft: It is a computer science
portal. It is an educational website. Prepare for the
Recruitment drive of product based companies like
Microsoft, Amazon, Adobe etc with a free online placement
preparation course.
</div>
</center>
</body>
</html>
<!-- Including one css file into other -->
@import "style2.css";
h1 {
color: rgba(23, 21, 20, 0.78);
}
.css1 {
color: #171616;
background-image: linear-gradient(to right, #d0ad30, #bbd719);
position:static;
}
body {
background: #d9e716;
opacity: 0.5;
}
Example 2:
Many CSS file can be imported using one CSS file
HTML Section:
File name is Example.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<h1>BAJARANGI SOFT<h1>
<div include="form-input-select()">
<select required>
<option value="">Example Placeholder</option>
<!-- Available Options -->
<option value="1">Bajarangi Soft</option>
<option value="2">w3skul</option>
<option value="3">tuitorial point</option>
<option value="4">CodeComunity</option>
<option value="5">Coders</option>
</select>
</div>
</body>
</html>
@import "style2.css";
body {
border:black;
justify-content: center;
text-align: center;
}
h1 {
color: #f61212;
text-decoration: underline overline;;
}