How to include one CSS file in another?

10 May, 2022
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 
html
<!DOCTYPE html><html>    <head>    <!-- linking css file with html file -->    <link rel="stylesheet" href="style1.css">    </head>         <body>        <center>        <marquee><h1>GeeksforGeeks</h1> </marquee>        <div class="css1">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>        </center>    </body></html>                               
Output: Without using CSS file  
CSS section1: File name is style1.css 
CSS
<!-- Including one css file into other -->@import "style2.css";   h1 {     color:green;   }  .css1 {     color:black;     background-image: linear-gradient(to right, #DFF1DF, #11A00C);     position:static;   }
Output: Using style1.css file without importing the second CSS file (style2.css). 
CSS section2: File name is style2.css 
CSS
body {    background:black;        opacity: 0.5;}
Output:After importing the style2.css file into the style1.css file by using @import keyword. 
Note: Many CSS file can be imported using one CSS file.Example 2:  
HTML Section: File name is Example.html
html
<!DOCTYPE html><html>    <head>        <link rel="stylesheet" href="styl.css">    </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">tuitorial point</option>                <option value="4">CodeComunity</option>                <option value="5">Coders</option>            </select>        </div>    </body></html>                                 
Output: Without using CSS file 
CSS Section1: File name is style1.css 
CSS
@import "style2.css";body {    border:black;    justify-content: center;    text-align: center;}                
Output: Using style1.css file without importing style2.css file. 
CSS Section2: File name is style2.css 
html
h1 {    color:green;    text-decoration: underline overline;;}                   
Output:After using both CSS file (style1 and style2).
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 file 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.
rs1686740
sooda367
hardikkoriintern
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property