CSS @import

The CSS @import rule allows you to import a CSS file into another CSS file. This can be useful when you want to separate your styles into different files for organization purposes. The imported file will be included in the CSS at the point where the @import rule is declared.

Here's an example of how to use the @import rule:

Result:


    @import url("styles.css");

In this example, we are importing a file called styles.css into our main CSS file. This will merge the styles from styles.css with the styles in the main CSS file.

It's important to note that the @import rule must be the first thing in your CSS file, before any other rules. This is because CSS is processed from top to bottom, and the styles in the imported file will override any conflicting styles in the main file.

You can also import multiple CSS files by using multiple @import rules:

Result:


    @import url("reset.css");
    @import url("typography.css");

In this example, we are importing two different CSS files, reset.css and typography.css, into our main CSS file.

By using the @import rule, you can modularize your styles and make your CSS files more maintainable and organized.