HTML Guides for @import

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>