How to Include One CSS File in Another?

While developing extensive projects, it is better to create separate files for HTML and CSS. As we are well aware, CSS provides numerous properties which developers can use to make web pages and HTML documents more aesthetic. Therefore, the ideal approach is to create multiple CSS files for different project components. This helps developers to search the specific code for modification.

This post will explain how to add one CSS file to another.

How to Incorporate one CSS File Into Another?

The CSS “@import rule” is utilized to incorporate one CSS file into another. Check out the example for a clear understanding.

Example: Including One CSS File in Another

First, create three files, one HTML and two CSS files.

Step 1: Create HTML File

Create an HTML file, “index.html”, then add the “<link>” element in the “<head>” section as given below. Here “rel” attribute is used to define the relationship between HTML and the linked file, and “href” is used to specify file source:

In the “<body>” section, perform the following steps:

Add a “<div>” element and assign it two classes “content-div” and “book”.
Add “<h3>” element for heading and “<ul>” element to create a list.
To list the items, add “<li>” tags:

<div class="content-div book">

<h3>Books</h3>

<ul>

<li>Al-chemist</li>

<li>The Kite Runner</li>

</ul>

</div>

Step 2: Create CSS File

After that create the “main.css” file and add the following code:

.content-div {

width: 400px;

height: 300px;

margin: auto;

background-color: rgb(245, 230, 212);

}

The “.content-div” is utilized to access the “<div>” element having class named as “content-div” and the following properties are applied to it:

“width” determines the element’s width.
“height” adjusts the element’s height.
“margin” generates the space around the HTML element.
“background-color” changes the HTML element’s background color.

Output

Step 3: Create Second CSS File

Next, create a second CSS file, “book.css”. Then, access the second class name “.book” and assign it the following CSS properties:

.book {

background-image: url(/images/leaves-.jpg);

background-size: cover;

padding: 15px;

font-size: 40px;

font-weight: bold;

color: rgb(243, 243, 243);

}

Here:

“background-image” is used to set the background image by defining the URL of the image.
“background-size” specifies the size of the element’s background image.
“padding” applies space inside the element’s border.
“font-size” sets the font size.
“font-weight” designates the font’s thickness.
“color” determines the font color.

Add the “@import” rule at the top of the “main.css” file:

@import url(books.css);

The “@import” rule imports the CSS file into another CSS file. For instance, the “books.css” is included in the “main.css” file.

The output verifies that the CSS properties of both files have been successfully applied:

We have successfully included one CSS file in another.

Conclusion

To include one CSS file in another, use the CSS “@import” rule. The “@import” rule must be specified at the top of the CSS file where you want to include another CSS file. In order to link the CSS files in HTML, the “<link>” tag, along with the “href” attribute, is used. This post has explained how to incorporate one CSS file into another.