Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS @charset rule
The CSS @charset rule specifies the character encoding used in an external CSS file. It must be placed at the very beginning of the CSS file to ensure proper interpretation of special characters and symbols.
Syntax
@charset "encoding";
Rules for Usage
- Must be the first thing in the CSS file (no spaces or comments before it)
- The encoding name must be enclosed in double quotes
- Only one
@charsetrule is allowed per CSS file - Most commonly used with UTF-8 encoding
Example: UTF-8 Character Set
The following example shows how to specify UTF-8 encoding in a CSS file −
<!DOCTYPE html>
<html>
<head>
<style>
@charset "UTF-8";
.special-content::before {
content: "? Special: ?50 ? ?? ? ????";
color: #333;
font-weight: bold;
}
.container {
padding: 20px;
border: 2px solid #ccc;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="special-content">This content uses special characters</div>
</div>
</body>
</html>
A bordered container with text displaying special characters including stars, euro symbols, Chinese characters, and Arabic text properly rendered.
Example: ISO-8859-1 Character Set
Here's how to specify ISO-8859-1 encoding for Western European characters −
@charset "ISO-8859-1";
.european-text {
content: "Café, naïve, résumé";
}
Common Character Sets
| Character Set | Description | Usage |
|---|---|---|
UTF-8 |
Universal encoding | Recommended for all modern websites |
ISO-8859-1 |
Western European | Legacy support for Latin characters |
UTF-16 |
Unicode 16-bit | Less common for CSS files |
Conclusion
The @charset rule ensures proper display of special characters in CSS files. Always use UTF-8 encoding for modern web development and place the rule at the very beginning of your CSS file.
Updated on: 2026-03-15T11:44:52+05:30
162 Views
Advertisements