CSS: The @charset rule may only occur at the start of the style sheet. Please check that there are no spaces before it.

The @charset rule in a <style> element is not valid because @charset only applies to external CSS files, not inline styles.

When CSS is embedded inside a <style> element, the character encoding is already determined by the HTML document itself (through the <meta charset> declaration or the HTTP Content-Type header). The @charset rule has no effect in this context, and the W3C validator flags it as an error.

This error also appears when @charset is present in an external .css file but is not on the very first line, or has a space or BOM (byte order mark) before it. In external stylesheets, @charset must be the absolute first thing in the file, with no preceding whitespace or comments.

How to fix it

If the @charset rule is inside a <style> element, remove it:

<!-- Wrong: @charset inside a style element -->
<style>
  @charset "UTF-8";
  body {
    color: #333;
  }
</style>

<!-- Fixed: remove the @charset rule -->
<style>
  body {
    color: #333;
  }
</style>

If the @charset rule is in an external stylesheet, make sure it is on the very first line with no preceding spaces, BOM characters, or comments:

@charset "UTF-8";
body {
  color: #333;
}

Learn more:

MDN Reference

MDN: @charset

→

MDN Reference

MDN: CSS syntax

→