A “style” element in “body” must be the first child of its parent.

A <style> element in the <body> comes after other content inside its parent, but the HTML standard only allows it there as the parent's first child.

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 go inside an @scope block, which limits them to the parent of the <style> and everything inside it. Putting the <style> first in that parent means the browser has the styles before it renders any of the content they apply to.

Whitespace and comments before the <style> don't count, so indenting it or adding a comment above it is fine. Any element or text before it triggers the error, including a heading, a <link>, a <script> or another <style>. A <style> at the end of a container, or at the end of the <body>, breaks the rule as well. When two <style> elements sit next to each other, the second one is reported, so merge their rules into a single element.

To fix the error, move the <style> element up so it's the first thing inside its parent. An @scope block without a selector still applies to the same parent, so the styles keep matching the same elements. If the parent has to start with something else, such as a heading, wrap the content the styles target in a new element and put the <style> at the top of it. The scope then becomes that wrapper. Styles meant for the whole page belong in the <head>.

Invalid example

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

Valid example

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

Learn more:

MDN Reference

MDN Web Docs: <style> element

→

MDN Reference

MDN Web Docs: @scope

→

WHATWG Spec

HTML Standard: Document metadata (the style element)

→