CSS @charset Rule

CSS @charset rule specifies the character encoding to be used in the style sheet.

Character encoding is a method of converting individual symbols and characters into bytes. There are several encoding systems such as ‘UTF-8’, ‘ASCII’, ‘ANSI’, etc. The @charset at-rule is used to specify which of these encoding systems should be used in our document.

There are a few rules which we have to follow while using @charset at-rule:

• The @charset at-rule must be the first element in the style sheet and must not be preceded by any character.
• The @charset at-rule can not be used inside the <style> attribute.
• If several @charset at-rules are specified, only the first charset is used for encoding.

The example below sets the encoding style to ‘UTF-8’:

@charset "UTF-8";

Few valid and invalid charset declaration

@charset "UTF-8";       /* Sets the encoding style to Unicode UTF-8 */
 @charset "UTF-8";      /* Invalid, there is a character (a space) before the at-rule */
@charset 'iso-8859-15'; /* Invalid, wrong quotes are used */
@charset  "UTF-8";      /* Invalid, more than one space specified between @charset and "utf-8"*/
@charset UTF-8;         /* Invalid, encoding system(UTF-8) must be enclosed within double quotes("") */

CSS Syntax

The @charset at-rule has the below syntax:

@charset “charset”

Property Values