What You’ll Learn

The @charset at-rule declares the character encoding of a stylesheet. UTF-8 is the most common value and ensures international characters render correctly in external CSS files.

Introduction

The @charset at-rule in CSS declares the character encoding of a stylesheet. It tells the browser how to interpret the bytes in a CSS file so that letters, symbols, and Unicode characters display correctly.

Definition and Usage

@charset is not a CSS property — it is an at-rule, like @media or @import. It applies to the entire stylesheet, not to individual elements. In practice, UTF-8 is the encoding you will use almost every time.

The rule is mainly useful in external .css files. Browsers often ignore @charset inside embedded <style> tags because the HTML document already defines encoding through <meta charset="UTF-8"> or HTTP headers.

📝 Syntax

The syntax for @charset is a quoted encoding name followed by a semicolon. It must appear at the very beginning of an external stylesheet:

@charset "UTF-8";

The encoding name is case-insensitive in CSS, but "UTF-8" is the conventional form. Only one @charset rule is permitted per file.

Basic Example

@charset "UTF-8";

body {
  font-family: system-ui, sans-serif;
  color: #1e293b;
}

Placement Rules

• @charset must be the first statement in an external CSS file.
• In strict interpretation, nothing — not even comments — may appear before it.
• Only one @charset rule is allowed per stylesheet.
• It is not inherited and does not cascade to other stylesheets.
• Embedded <style> blocks typically ignore @charset.

When to Use @charset

Reach for @charset in these situations:

• External CSS files — Declare encoding explicitly at the top of standalone .css files.
• Non-ASCII content in CSS — When your stylesheet contains Unicode in content values, font names, or string data.
• Legacy servers — When HTTP headers do not reliably send charset=utf-8.
• Cross-origin stylesheets — When encoding cannot be inferred from the HTML document.
• Documentation clarity — Signal to other developers that the file is saved as UTF-8.

Skip @charset when your HTML already uses <meta charset="UTF-8">, your server sets the correct Content-Type, and your CSS file contains only ASCII characters.

Examples Gallery

Practice @charset with UTF-8 declarations, Unicode content, full stylesheet structure, and the external file pattern.

@charset "UTF-8";

body {
  font-family: system-ui, sans-serif;
  padding: 1.5rem;
  color: #1e293b;
}

@charset "UTF-8";

.label::before {
  content: "© 2026 — café ";
  color: #2563eb;
  font-weight: 600;
}

@charset "UTF-8";

* {
  box-sizing: border-box;
}

body {
  font-family: Georgia, serif;
  margin: 0;
  padding: 2rem;
  background: #f8fafc;
  color: #334155;
}

h1 {
  color: #1e293b;
}

<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

/* styles.css — first line:
   @charset "UTF-8";
   body { font-family: system-ui, sans-serif; }
*/

💬 Usage Tips

• Save as UTF-8 — Configure your editor to save CSS files in UTF-8 without BOM when possible.
• Server headers — Set Content-Type: text/css; charset=utf-8 on your web server.
• First line only — Place @charset before comments, imports, and all other rules.
• Quote the value — Use double quotes: @charset "UTF-8"; (single quotes also work in CSS).
• Pair with HTML meta — Use both document-level and stylesheet-level encoding for maximum compatibility.

⚠️ Common Pitfalls

• Comments before @charset — A comment on line 1 can invalidate the rule in strict parsers.
• Using in <style> tags — Browsers ignore @charset in embedded stylesheets.
• Multiple declarations — Only the first valid @charset is honored; duplicates are ignored.
• Treating it as a property — You cannot write charset: "UTF-8" inside a rule block.
• Wrong file encoding — Declaring UTF-8 while saving the file in a different encoding causes mojibake.

♿ Accessibility

• Correct character display — Proper encoding ensures screen readers and assistive tech receive the intended text.
• International content — UTF-8 supports accented characters and scripts used by global audiences.
• Readable generated content — Unicode in content values must encode correctly for all users.
• Language attributes — Pair encoding with lang attributes on HTML elements for pronunciation hints.
• Avoid garbled symbols — Encoding errors create confusing replacement characters that harm comprehension.

💡 Best Practices