@charset

The @charset CSS at-rule is used to specify the character encoding used in the style sheet.

What Are Character Sets and Encodings?

The W3C defines character sets and encodings:

A character set is a collection of letters and symbols used in a writing system. For example, the ASCII character set covers letters and symbols for English text, ISO-8859-6 covers letters and symbols needed for many languages based on the Arabic script, and the Unicode character set contains characters for most of the living languages and scripts in the world.

Characters in a character set are stored as one or more bytes in a computer. Each byte or sequence of bytes represents a given character. A character encoding is the key that maps a particular byte or sequence of bytes to particular characters that the font renders as text.

There are many different character encodings. If the wrong encoding is applied to the bytes in memory, the result will be unintelligible text. It is therefore important, if people are to read your content, that you correctly label the character encoding used. – W3.org

A document’s character encoding is usually specified in the HTML in the form of a <link charset=""> or <meta ..> tag. You should always use UTF-8 as the character encoding of your style sheets and your HTML pages, and declare that encoding in your HTML. To set the character encoding in an HTML5 document, one of the following three declarations is sufficient:

<!-- HTTP HEADER -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- HTML4-style meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Short HTML5 meta (Recommended) -->
<meta charset="utf-8">
                

You will rarely ever need to declare a character encoding in your CSS. If you declare a character encoding in your HTML, you don’t need to declare it in your style sheet. If your style sheet resides in a separate file (not inside the HTML), the user agent will deduce the character encoding of a style sheet by looking up four different methods, in the order shown below, and if all four methods fail, it will use a default. The user agent will observe the following priorities (from highest priority to lowest) to determine the character encoding of a style sheet:

• A charset attribute in a Content-Type HTTP header (or similar, see the above snippets) sent by the web server.
• A Unicode byte order mark, or a @charset at-rule.
• A charset attribute in a <link charset=""> or other metadata from the linking mechanism (if any).
• Charset of referring style sheet or document (if any)

If all four fail, the user agent will assume encoding to be UTF-8.

However, if your style sheet contains non-ASCII characters and, for some reason, you can’t rely on the encoding of the HTML and the associated style sheet to be the same, you should use @charset or HTTP headers to declare the encoding. (If your HTML and CSS files use the same encoding, the latest versions of major browsers will apply the encoding of the HTML file to the CSS stylesheet.) (W3C – 2014)

Tip: If you are using special characters in the style sheet that are not represented by the character encoding specified on the style sheet, you can escape the characters using Character Escapes. Escapes provide a way of representing characters that are not available in the character encoding you are using, or a way of avoiding the use of the character for other reasons (such as when they may conflict with syntax). Read more about when and how to use escapes to represent characters in CSS.

Using @charset

The @charset must be the first thing in the style sheet. It cannot be preceded by any characters, not even comments! It can only be preceded by a Unicode Byte Order Mark if the byte order mark is appropriate for the encoding used. Any @charset not declared at the beginning of the style sheet will be ignored by the user agent.

After “@charset”, you specify the name of a character encoding (in quotes). For example:

@charset "ISO-8859-1";