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:
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:
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.