How to use @import CSS?

General Discussions
#1

How to use @import CSS?

#2

Hey, there Saanvi,

Yes, you can use @import in CSS.

To use @import in CSS, you can import another CSS file into your main CSS file. For example:

@import url(“styles.css”);

This imports the styles from styles.css into the current CSS file.

I hope this helped. To learn more about how CSS Modules help you create separate modules to import into another class. Follow the guide below and get detailed insights.

1 Like
#3

Adding to Saanvi,

The @import rule in CSS is a nifty tool that lets you bring in styles from another CSS file. Think of it like inviting a friend over to help you with your design. It’s especially handy for keeping your styles organized in separate, modular files or pulling in stylesheets from external sources.

For instance, let’s say you want to use the sleek and modern Roboto font from Google Fonts. You can easily invite it into your CSS party with a simple @import statement:


@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

Just like that, your CSS file is now dressed in the stylish Roboto font, ready to impress with its clean, professional look.

#4

In my opinion, using @import can impact page load times because each @import statement triggers an additional HTTP request to fetch the imported file.

To improve performance, it’s generally recommended to use <link> tags in your HTML to directly link to CSS files rather than using @import in your CSS.