Indicate what character set the style sheet written in with CSS

To indicate what character set the style sheet is written in with CSS, use the @charset rule. The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character sets.

Syntax

@charset "character-set-name";

Example

The following example shows how to specify the UTF-8 character set at the beginning of a CSS file −

<!DOCTYPE html>
<html>
<head>
<style>
    @charset "UTF-8";
    
    .content {
        font-family: Arial, sans-serif;
        color: #333;
        padding: 20px;
    }
    
    .unicode-text {
        font-size: 18px;
        color: blue;
    }
</style>
</head>
<body>
    <div class="content">
        <p>Regular text with standard characters.</p>
        <p class="unicode-text">Unicode characters: © ® ? ? £ ¥</p>
    </div>
</body>
</html>
A page displays regular text and Unicode special characters (copyright, registered trademark, euro sign, etc.) properly rendered with UTF-8 encoding.

Common Character Sets

Character Set Description
"UTF-8" Universal character encoding (recommended)
"ISO-8859-1" Latin alphabet character set
"ASCII" Basic ASCII character set

Conclusion

The @charset rule ensures proper character encoding for CSS files. Always place it at the very beginning of your stylesheet, and UTF-8 is the recommended character set for modern web development.

Updated on: 2026-03-15T11:28:57+05:30

202 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements