It is a good idea to always declare the encoding of external
CSS style sheets if you have any non-ASCII text in your CSS file. For example,
you may have non-ASCII characters in font names, in values of the content
property, in selector values, etc.
The @charset CSS at-rule specifies the character encoding used in the style sheet. It used at starting position of the style sheet and not is preceded by any character; @charset is not nested within another statement, as well as, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.
Syntax:
@charset charset;
Note: “charset” is a string that denoting the character encoding.
Types of @charset:
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
@charset 'iso-8859-15'; /* Set the encoding of the style sheet to Latin-9 (Western European languages, with euro sign) */
@charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
@charset UTF-8; /* Invalid, without ' or ", the charset is not a CSS <string> */
Example:
<html>
<head>
<title></title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
background-color:#A8A8A8 ;
color:#000;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<p>
This demo on @charset</p>
</body>
</html>
Leave Comment