Open In App

How to include one CSS file in another?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

html




<!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:  

Screenshot-2024-01-17-111443

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.

HTML




<!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:

Screenshot-2024-01-17-111610

CSS: Now writing code for style.css file to showcase the working. 

CSS




body {
    background-color: crimson;
}


Output:

Screenshot-2024-01-17-111905

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.

html




<!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.

HTML




<!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.

CSS




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.



Last Updated : 24 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads