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:
Step 2: Create CSS File
After that create the “main.css” file and add the following code:
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.
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:
color: rgb(243, 243, 243);
- “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:
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.
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.