Rule “@import” not allowed in a “style” element in “body”.

A <style> element in the <body> contains an @import rule, which the HTML standard doesn't allow there.

Since October 2026, a <style> element can sit in the <body> as long as its styles can't reach anything earlier in the page. Its style rules have to go inside an @scope block, and it can't use @import at all. The rules in an imported file aren't scoped, so they would apply to the whole page. Every @import in the element triggers the error, including ones with layer() or a media query, even when the rest of the style sheet is valid.

Moving the @import into the @scope block doesn't work either. CSS only accepts @import at the top of a style sheet, before other rules, so the validator reports a CSS parse error instead. Older validator builds worded this message differently and mentioned @scope, but the problem and the fix are the same.

To fix the error, load the file with a <link rel="stylesheet"> element. A stylesheet link is allowed in the <body>, but the linked rules still apply to the whole page, so the <head> is the more usual place for it. If the imported rules only target this part of the page, copy them into the @scope block of the <style> element instead. A <style> in the <body> also has to stay the first child of its parent.

Invalid example

<div class="card">
  <style>
    @import url("card.css");

    @scope {
      p {
        color: darkslategray;
      }
    }
  </style>
  <p>Card content</p>
</div>

Valid example

<div class="card">
  <style>
    @scope {
      p {
        color: darkslategray;
      }
    }
  </style>
  <link rel="stylesheet" href="card.css">
  <p>Card content</p>
</div>

Learn more:

MDN Reference

MDN Web Docs: @import

→

MDN Reference

MDN Web Docs: <link> element

→

WHATWG Spec

HTML Standard: Document metadata (the style element)

→