CSS @charset Property

CSS @charset Rule

The @charset rule in CSS defines the character encoding for a stylesheet. It ensures that special characters (like é, ñ, ü, ©) are interpreted correctly by the browser.

1. Syntax

@charset "UTF-8";

✅ Must be the first line in the CSS file (before any code or comments).
✅ UTF-8 is the recommended encoding, as it supports all languages.

2. Example – Declaring UTF-8 Encoding

@charset "UTF-8";

body {
  font-family: "Arial", sans-serif;
}

✅ Ensures special characters are displayed correctly.

3. When to Use @charset?

• If your CSS file contains non-ASCII characters (e.g., é, ñ, ü).

• If your webpage supports multiple languages.

• To prevent encoding issues when importing CSS files.

🚨 Note: If your CSS is included within an HTML file using <style>, you don’t need @charset. Instead, declare the encoding in the HTML file:

<meta charset="UTF-8">

4. Best Practices

✔ Always use UTF-8 for maximum compatibility.
✔ Ensure @charset is the first line of your CSS file.
✔ Use @charset only in external stylesheets, not inline CSS.