How to include one CSS file in another?

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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output: Without using CSS file

  • CSS section1: File name is style1.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output: Using style1.css file without importing the second CSS file (style2.css).

  • CSS section2: File name is style2.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    body {
        background:black;
            opacity: 0.5;
    }

    chevron_right

    
    

    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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output: Without using CSS file

  • CSS Section1: File name is style1.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @import "style2.css";
    body { 
        border:black; 
        justify-content: center; 
        text-align: center; 
    }                 

    chevron_right

    
    

    Output: Using style1.css file without importing style2.css file.

  • CSS Section2: File name is style2.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    h1 { 
        color:green;
        text-decoration: underline overline;;
    }                    

    chevron_right

    
    

    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”);</stlye> in head section.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.