Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import various CSS files in the main HTML file or the main CSS file. It can be done by using the @import keyword.
Example 1: To showcase to include a CSS file in another first create a structure of HTML without using any CSS properties.
<!DOCTYPE html><html>
<head>
<title>To include one CSS file in another</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="geeks">
GeeksforGeeks: It is a computer science
portal. It is an educational website. Prepare for the <br>
Recruitment drive of product based companies like <br>
Microsoft, Amazon, Adobe etc with a free online placement
preparation course.
</div>
</body>
</html>
|
Output:
Import: Now in HTML under style tag write the below code to import style.css file to show how to include one CSS file in another.
<!DOCTYPE html><html>
<head>
<title>To include one CSS file in another</title>
<style>
@import "style.css";
h1 {
color: green;
}
.geeks {
color: black;
background-image: linear-gradient(to right, #DFF1DF, #11A00C);
position: static;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="geeks">
GeeksforGeeks: 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>
</body>
</html>
|
Output:
CSS: Now writing code for style.css file to showcase the working.
body { background-color: crimson;
} |
Output:
Note:
Many CSS files can be imported using one CSS file.
Example 2: This example also shows to include one CSS file in another without using CSS file.
<!DOCTYPE html><html>
<head>
<title>
To include one CSS file in another
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div include="form-input-select()">
<select required>
<option value="">Example Placeholder</option>
<!-- Available Options -->
<option value="1">GeeksforGeeks</option>
<option value="2">w3skul</option>
<option value="3">tutorial point</option>
<option value="4">CodeCommunity</option>
<option value="5">Coders</option>
</select>
</div>
</body>
</html>
|
Output:
Import: Now importing CSS with URL( ) file in HTML document.
<!DOCTYPE html><html>
<head>
<title>
To include one CSS file in another
</title>
<style>
@import url("style.css");
body {
border: black;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div include="form-input-select()">
<select required>
<option value="">Example Placeholder</option>
<!-- Available Options -->
<option value="1">GeeksforGeeks</option>
<option value="2">w3skul</option>
<option value="3">tutorial point</option>
<option value="4">CodeCommunity</option>
<option value="5">Coders</option>
</select>
</div>
</body>
</html>
|
Output:
CSS: Now write code for style.css file to work on your HTML document.
h1 {
color:green;
text-decoration: underline overline;;
} |
Output:
Note: There are two different ways to import a CSS file into another using @import url(“style2.css”); or @import “style2.css”; or directly import any CSS file or multiple CSS files in the HTML file directly within <style>@import “style1.css”; or .@import url(“style2.css”); </style> in head section.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.