CSS @charset Rule

Last Updated : 09 Jun, 2023

The @charset rule specifies the character encoding used in the style sheet. The @charset must be the first element in the style sheet and if several @charset rules are defined then the only first one is used. It can not be used in the <style> element where the character set of the HTML page is relevant.

Syntax:

@charset "utf-8";

Property value: This parameter accepts a single value “charset”. It is useful when some NON-ASCII characters are used in the content. There are so many ways to define the character encoding of a style sheet. All the browsers follow the following methods in the given orders.

The value of the Unicode byte-order character has to be placed at the beginning of the file.
The value is given by the charset attribute of the Content-Type: HTTP header or the equivalent in the protocol used to serve the style sheet.
Use the character encoding defined by the referring document. This method does not use in HTML 5.
Assume that the document is UTF-8

Note: Below list describes the correct and incorrect charset encoding:

@charset ‘iso-8859-15’; [Wrong quoting style used, it’s invalid] @charset “UTF-8”; [More than one space invalid] @charset “UTF-8”; [Invalid, there is a character (space) before the at-rule] @charset “UTF-8”; [It Sets the encoding of the style sheet to the Unicode UTF-8]

Example: In this example, we are using the above-explained property.

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS @charset Rule</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks</h1>
 
        <p>Learn</p>
        <p>Contribute</p>
        <p>Explore</p>
    </center>
</body>
</html>