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

> Canonical HTML version: https://rocketvalidator.com/html-validation/rule-import-not-allowed-in-a-style-element-in-body
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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

## Valid example

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