What does @charset "utf-8"; mean in a CSS file?

Question

I'm using Dreamweaver to create my own website, and in the CSS files Dreamweaver always puts @charset "utf-8"; at the top of the CSS code. Is this an important thing to include, and what does it mean?

Thank you for any help.

Answer 1

It's a little complicated to explain from scratch. UTF-8 stands for Universal Character Set Transformation Format - 8 Bit. It is a standard designed to be backwards compatible with ASCII, and it also concerns 'endianness'.



Endianness is a cool term. It comes from Gulliver's Travels. In the first land Gulliver visits, Lilliput, there's a war going on between people who believe eggs should be broken at the big end, and those who believe the small end. They are called Big-Endians and LIttle-Endians. The term 'endian' was borrowed for two schemes of encoding 2-byte characters, whether the big or small byte should come first. The UTF-8 standard avoids endianness altogether because it's an 8-bit standard, so only 1 byte.



UTF-8 has become nearly universal on the World Wide Web, and its growing more and more popular in other applications as well.

Answer 2

It tells the browser to read the css file as UTF-8. This is handy if your CSS contains unicode characters and not only ASCII.



Using it in the meta tag is fine, but only for pages that include that meta tag.

Answer 3

When you use non-universal characters like ä, different character encoding formats put them in different places. If the encoding isn't specified in the file but different than the browser's default setting, ä could appear as  or something like that.

The line is telling the browser that the CSS file was encoded using UTF-8 encoding, allowing you to use special characters in your CSS rule definitions.