The @charset rule declares the character encoding of an external stylesheet. Use it so non-ASCII text in CSS (for example in content) decodes correctly.
Prefer UTF-8 for new stylesheets. Put @charset as the first bytes of the .css file — before comments and before @import. Only one declaration is allowed.
Encoding detection matches an exact byte sequence at the file start. Small syntax mistakes are ignored. HTTP Content-Type charset wins over @charset when present.
If HTML and CSS both use UTF-8, you may not need @charset. Keep it when encodings might differ or when teaching clear encoding intent.
@charset "<charset-name>";Double quotes, exactly one space after @charset, then a semicolon. No leading space on the line.
| Value / form | Description | Try it |
|---|---|---|
"UTF-8" | Recommended encoding for modern CSS | Try it |
with content | Useful when CSS includes non-ASCII characters | Try it |
| invalid quotes | Single quotes are not accepted for encoding detection | Try it |
| must be first | Anything before it makes the declaration fail | Try it |
"iso-8859-15" | Legacy encoding example (prefer UTF-8) | Try it |
| extra spaces | More than one space after @charset is invalid | Try it |
@charsetUse it only in external stylesheets, with exact syntax.
.css file as UTF-8 (declaration alone is not enough).@charset "UTF-8"; as the first line of the file.@import (if any), then the rest of your CSS.<link rel="stylesheet"> from HTML.| Piece | Required? | Role |
|---|---|---|
External .css file | Yes | Where encoding detection applies |
| Exact byte sequence | Yes | Double quotes + one space + semicolon |
| File saved as that encoding | Yes | Declaration must match real bytes |
| HTTP charset header | Often present | Takes precedence over @charset |
@charset does not paint a box — it is a file encoding declaration. Compare valid and invalid forms below.
Each snippet focuses on @charset. Use Try It Yourself for a live editor. Editors run inside HTML, so treat @charset as study syntax for external files.
Declare UTF-8 as the first line of an external stylesheet.
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
color: #0f172a;
}@charset.contentUTF-8 keeps symbols and text in generated content readable.
@charset "UTF-8";
.label::before {
content: "★ ";
}content. Generated text can include symbols and letters outside ASCII.@charset comes first, then optional @import, then rules.
@charset "UTF-8";
@import url("base.css");
h1 {
color: #5b21b6;
}@charset may precede @import.@charset lines are ignored.Most failures come from tiny syntax mistakes at the top of the file.
Single quotes, missing quotes, leading spaces, or two spaces after @charset are ignored for encoding detection.
A comment or blank line before it means the declaration does not count.
<style>Embedded CSS uses the HTML document encoding. Put @charset in linked .css files.
A Content-Type charset header overrides @charset. Keep them consistent.
Writing @charset "UTF-8"; in a Latin-1 file does not magically convert the bytes.
@charset is a browser CSS encoding declaration. Node.js, Deno, and Bun do not apply it as a layout API.
Chrome 2+, Firefox 1.5+, Safari 4+, Edge 12+, Opera 10+, Internet Explorer 6+, Samsung Internet 4+.
Bottom line: Safe everywhere. Focus on exact syntax and UTF-8 files more than version numbers. Not a server runtime API.
@charset "UTF-8"; — double quotes, one space, first line..css files. Usually ignored inside <style>.@charset when encoding must be explicit.One line: @charset "UTF-8"; is the first line of an external stylesheet when you need an explicit encoding.
Learn how to load custom fonts with the @font-face at-rule.
5 people found this page helpful