@import must precede all other statements (besides @charset or empty @layer)

The @import rule in CSS is used to import external style sheets into another style sheet. It must be used before any other CSS rule (except for @charset or empty @layer) in order to work properly.

When using the @import rule, you specify the URL of the external style sheet that you want to import. This can be a relative or an absolute URL. The imported style sheet will then be applied to the current style sheet.

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

    
      @import url("styles.css");
      p {
        color: blue;
      }
    
  

In the example above, an external style sheet called “styles.css” is imported using the @import rule. The imported style sheet contains styles for headings, paragraphs, etc. Additionally, a style for paragraphs is defined in the current style sheet (color: blue).

It’s worth mentioning that @import is not widely used anymore, as it has some performance implications. Instead, it is recommended to use the <link> element in the HTML document to link external style sheets.