Is it possible to include one CSS file in another?

In this tutorial, we will learn how to include one CSS file in another?
By Apurva Mathur Last updated : July 23, 2023

Answer: Yes! It is possible to include one CSS file in another.

Let's suppose you have a CSS file named "css2.css", and you have to include this file in another CSS file named "css1.css". In this tutorial, we will learn to include one CSS file to another.

Including one CSS file to another CSS file

To include one CSS file in another CSS file, you can use the @import rule followed by the space and the CSS file name within the inverted commas that you want to include in this CSS file at the top of the file.

Example with step-by-step explanation

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 Examples »

Table Fixed Header and Scrollable Body

How to center your website horizontally with CSS?