💡 What is @charset "utf-8"; in CSS?

The @charset "utf-8"; declaration is used to define the character encoding of a CSS file.

In simple terms, it tells the browser:

“This CSS file uses UTF-8 character encoding.”

Many languages contain special characters that are not part of the standard English alphabet.

• Turkish: ı, İ, ğ, ü, ö, ç, ş
• French: é, è, à, ç, û
• Arabic: ع، ش، ق

If the browser does not know the correct encoding format, these characters may appear as broken or unreadable symbols.

Using @charset "utf-8"; helps the browser correctly interpret and display these characters.

UTF-8 is the most widely used character encoding standard on the web.

It allows websites and CSS files to properly support:

• Multiple languages
• Special symbols
• Unicode characters
• International text content

This is especially useful when your CSS contains:

• Comments with special characters
• Custom font names
• content: values in pseudo-elements

@charset "utf-8";

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

p::before {
  content: "ş";
}
                

The @charset rule must always appear at the very top of the CSS file.

@charset "utf-8";

body {
  color: black;
}
                

If it appears after other CSS rules, it becomes invalid.

body {
  color: red;
}

@charset "utf-8";
                

⚠️ In this example, the browser may ignore the @charset declaration because it was not placed first.