@import in CSS

The @import directive in CSS3 allows you to include external stylesheets in your main stylesheet. This is useful when you have a large stylesheet and you want to organize it into smaller, more manageable chunks. You can also use the @import directive to include stylesheets from other sources, such as a library or framework.

Here's an example of how to use the @import directive in a CSS3 stylesheet:

/* main.css */
@import url("reset.css");
@import url("typography.css");

body {
    background-color: lightgray;
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 36px;
    color: navy;
}

In this example, the main stylesheet (main.css) uses the @import directive to include two external stylesheets: reset.css and typography.css. The contents of those stylesheets are included in the main stylesheet and will be applied to the web page along with the styles defined in main.css.

Note that the @import directive should be placed at the top of your stylesheet, before any other styles are defined, to ensure that all styles are properly applied. Additionally, some older browsers do not support the @import directive, so it's a good idea to include a fallback stylesheet using a <link> element in your HTML document, as a backup.

Include CSS file in CSS file

We can import css using this method from url OR cdn: 

@import "print_page.css" print;
@import url('https://fonts.googleapis.com/css2?family=Georama&display=swap');
@import "small_device_style.css" screen and (max-width: 540px);

---