ADVERTISEMENT
ADVERTISEMENT

Is it possible to include one CSS file in another?

In this tutorial, we will learn how to include one CSS file in another?
Submitted by Apurva Mathur, on June 20, 2022

Yes!, it is possible to include one CSS file in another. We can achieve this by using the @import rule; this allows us to import a CSS file into another CSS. It should always be declared at the top of the document.

For more clarity let us see the example,

Step 1: Create an HTML file and write this code inside that file.

<!DOCTYPE html>

<html>
   <head>
      <link rel="stylesheet" href="css1.css">
   </head>
   <body>
      <h2>Without any CSS file </h2>
      <center>
         <div class="container" >
            Happiness is connected with things that make you feel happy such as faith, wealth, career, relationships and love. For many people happiness is much more than career, success and wealth. Happiness is finding reasons behind your existence. The extend of happiness cannot be measured by any scale
         </div>
      </center>
   </body>
</html>

Output:

Example 1: Include one CSS file in another

Step 2: After this, create a CSS file and name it "css1.css", and include this file in your previous HTML file.

@import "css2.css";

h2 {
    color: white;
}

.container {
    background-color: lightgoldenrodyellow;
    font-size: 20px;
    font-family: "Arial Rounded MT Bold";
}

Output:

Example 2: Include one CSS file in another

Step 3: The last step is to make another CSS file and name it "css2.css" now with the help of the @import rule include this file in the "css1.css" file.

body {
    background-color: #b3d4fc;
}

Final Output:

Example 3: Include one CSS file in another

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.