CSS @charset Property

A @charset at-rule specifies the character encoding used in a stylesheet. It is strictly intended for external stylesheets. In HTML documents, character encoding should be defined using the <meta charset> tag instead. If multiple @charset rules are present, only the first one is recognized. The rule is ignored if placed inside a <style> block or a style attribute.

Syntax

Syntax of CSS @charset Rule

@charset "charset";

Here you can see how @charset can be used in a code:

How to use CSS @charset Rule?

@charset "iso-8859-15";       /* Set the encoding of the style sheet to iso-8859-15 */

The following piece of code shows both the right and wrong ways of using the @charset rule:

How to use CSS @charset Rule with right and wrong ways

@charset "UTF-8";       /* Valid: Set the encoding to Unicode UTF-8 */
@charset 'iso-8859-15'; /* Valid: Single quotes are allowed */
@charset  "UTF-8";      /* Valid: Extra whitespace is ignored */
 @charset "UTF-8";      /* Invalid: There is a space before the at-rule */
@charset UTF-8;         /* Invalid: Missing quotes around the value */

Values

The @charset rule only accepts a string value specifying the character encoding (e.g., "UTF-8", "iso-8859-1"). It does not support initial or inherit keywords, as it is an at-rule rather than a CSS property.

Practice