<?php 
// authors should fill in these assignments:
$directory = 'questions/'; // the directory path below /International up to but not including the file name: must end in a slash! 
$filename = 'qa-css-charset'; // the file name WITHOUT extensions
$authors = 'Russ Rolfe, Microsoft Corporation'; // author(s) and affiliations
$modifiers = 'Richard Ishida, W3C'; // people making substantive changes, and their affiliation
$searchString = 'qa-css-charset'; // blog search string - usually the filename without extensions
$firstPubDate = '2003-09-24'; // date of the first publication of the document (after review)
$lastSubstUpdate = '2010-08-07  6:36';  // date of last substantive changes to this document
$pathtophp = '../php'; // authors should check that the following points to /International/php - must be relative path
$outOfDateTranslation = 'no';

// authors AND translators should fill in these assignments:
$clang = 'en'; // the language extension for articles in this language (use 'en' for English)
$isTranslation = 'no';  // set to 'yes' if this is a translation !
$copyrightYear = '2003-2010'; // this year, but may also be a range, eg. 2002-2006
$thisVersion = '2010-09-09  12:33'; // date of latest edits to this document/translation

// translators should fill in these assignments:
$translators = 'xxxNAME, ORG'; // translator(s) and their affiliation - a elements allowed, but use double quotes for attributes
$enVersion = 'xxxYYYY-MM-DD';  // date of the English original on which the translation is based (see last substantive change date at bottom of file)

include($pathtophp.'/bp3/boilerplate-'.$clang.'.php');

if (! isset($s_articles)) { $s_articles = "Articles"; }
$breadcrumbs = <<<eot
<a href='/International/'>$s_home </a> &gt; <a href='/International/resources'>$s_resources</a> &gt; <a href='/International/articlelist#characters'>$s_articles</a>
eot;

// create the table of contents as a nested list. Some standard text can be given as PHP variables. Delete, add or change links as necessary - this is set up for an faq.
$toc = <<<eot
<ol>
<li><a href="#question">$s_questionLink</a></li>
<li><a href="#background">$s_backgroundLink</a></li>
<li><a href="#answer">$s_answerLink</a>
	<ol>
	<li><a href="#atcharset">Using @charset</a></li>
	<li><a href="#http">Using HTTP</a></li>
	</ol></li>
<li><a href="#bytheway">$s_byTheWayLink</a></li>
<li><a href="#endlinks">$s_furtherReadingLink</a></li>
</ol>
eot;

// use the markup below if you need additional related links - you should only rarely need these
// otherwise delete the php
$additionalLinks = <<<eot
<h2><a id="links" name="links" tabindex="4">$s_relatedLinks</a></h2>
<p><a href="/International/questions/qa-html-encoding-declarations">Declaring character encodings in HTML</a></p>
<p><a href="http://www.iana.org/assignments/character-sets">IANA Charset Names</a></p>
eot;
include($pathtophp.'/bp3/structure.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php echo "lang='$clang' xml:lang='$clang'";?> xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Declaring character encodings in CSS</title>
		<meta name="keywords"
		 content="i18n internationalisation internationalization localisation localization translation CSS character encoding declaration" />
		<meta name="description" content="How do I declare the character encoding inside a CSS (Cascading Style Sheets) style sheet?" />
<?php echo $headincludes;?>

<link rel="stylesheet" href="/International/style/article-standards-v2.css" type="text/css" />
</head>

	<body>
		<span id="version-info" style="display: none;"><!-- #BeginDate format:IS1m -->2010-09-09  18:02<!-- #EndDate --></span> <?php echo $topOfPage; ?>

		<h1>Declaring character encodings in CSS</h1>

		<div class="section"><a id="contentstart" name="contentstart"></a> 
			<div id="audience"> 
				<p><?php echo $intendedAudience?> CSS coders, Web project managers, and anyone who wants to know how to declare the character encoding of a CSS file. </p>
			<?php echo $updated; ?>
			</div>

			<h2><?php echo $questionHead?></h2>
			<div class="section2"> 
				<p class="question">How do I declare the character encoding of a <abbr title="Cascading Style Sheets">CSS</abbr> style sheet?</p>
			</div>
		</div>
		
		<div class="section">
		<h2><?php echo $backgroundHead?></h2>
		<p>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.</p>
	</div>
		<div class="section"> 

			<h2><?php echo $answerHead?></h2>
			<p>For style declarations embedded in a document, @charset rules are not needed and must not be used. These rules are for use in linked style sheets only.</p>
			<div class="section2">
			<h3><a style="" id="atcharset" name="atcharset" href="#atcharset">Using @charset</a></h3>
			<p>To set the character encoding  inside the style sheet, use the <span class="kw">@charset</span> "at-rule". Its syntax is:</p>
			<div style="" class="example"> <code>@charset "&lt;IANA-defined-charset-name&gt;";</code> </div>
			<!--blockquote> 
				<p><code>@charset "&lt;IANA defined charset name&gt;";</code></p>
			</blockquote-->
			<p>Only one @charset rule may appear in an external style sheet and it must appear at the very start of the document. It must not be
				preceded by any characters, not even comments. (However, a <a href="/International/questions/qa-byte-order-mark" class="dfn">byte-order mark</a> is OK for a document in one of the Unicode encodings.)</p>
			<p>The name must be a charset name as described in the <a href="http://www.iana.org/assignments/character-sets">IANA registry</a>. The IANA registry commonly includes multiple names for the same encoding. In this case you should use the name designated as <span class="qterm">preferred</span>. For example to label your CSS file as UTF-8 encoded you would write:</p>
			<div style="" class="example"> <code>@charset "UTF-8";</code> </div>
			<!--blockquote> 
				<p><code>@charset "UTF-8";</code></p>
			</blockquote-->
			</div>
			<div class="section2">
				<h3><a style="" id="http" name="http" href="#http">Using HTTP</a></h3>
				<p>You can also declare the encoding of the file in the HTTP Content-Type header, if you have a means to do so. For more information about how to set the encoding in HTTP see <a href="/International/O-HTTP-charset"><cite>Setting the HTTP charset parameter</cite></a>. For example, this line in the HTTP response would indicate that the file is encoded in UTF-8.</p>
				<div class="example"> <code>Content-Type: text/html; charset=UTF-8 </code></div>
				<!--blockquote> 
				<p><code>@charset "&lt;IANA defined charset name&gt;";</code></p>
			</blockquote-->
				<p>We recommend that if you use an HTTP declaration, you also include a declaration inside the style sheet. This will ensure that the encoding is still known if the style sheet is used locally or moved, eg. for testing or editing.</p>
				<p>The declaration in the HTTP header will always override the in-document declaration, if there is a conflict.</p>
				<!--blockquote> 
				<p><code>@charset "UTF-8";</code></p>
			</blockquote-->
			</div>
		</div>
<div class="section"> 

			<h2><?php echo $btwHead?></h2>
	<p>The HTML 4.01 specification describes a <span class="kw">charset</span> attribute that can be added to the <span class="kw">link</span>  element and is supposed to indicate the encoding of the document you are linking to. The use of this attribute on a  <span class="kw">link</span> element is currently deprecated by the HTML5 specification, however, so you shouldn't use it. Actually the <span class="kw">charset</span> attribute declaration is not supported by all browsers anyway, so that is another reason to avoid it.</p>
</div>
<?php echo $survey;?>
<div class="section noprint">
	<h2><?php echo $readingHead?></h2>
	<ul id="full-links">
		<li>
			<p>Getting started? <a href="/International/getting-started/characters"><cite>Introducing Character Sets and Encodings</cite></a> <span class="uri">http://www.w3.org/International/getting-started/characters</span></p>
		</li>
		<li>
			<p>Tutorial, <a href="/International/tutorials/tutorial-char-enc/"><cite>Handling character encodings in HTML and CSS</cite></a> <span class="uri">http://www.w3.org/International/tutorials/tutorial-char-enc/</span></p>
		</li>
		<li>
			<p><a href="http://www.iana.org/assignments/character-sets"><cite>IANA Charset Names</cite></a> <span class="uri">http://www.iana.org/assignments/character-sets</span></p>
		</li>
		<li>
			<p><a href="/International/questions/qa-html-encoding-declarations"><cite>Character encoding declarations in HTML</cite></a> <span class="uri">http://www.w3.org/International/questions/qa-html-encoding-declarations</span></p>
		</li>
		<li>
			<p>Related links, <cite>Authoring HTML &amp; CSS</cite> – <a href="/International/techniques/authoring-html#charset">Characters</a> <span class="uri">http://www.w3.org/International/techniques/authoring-html#charset</span> – <a href="/International/techniques/authoring-html#css">Declaring the character encoding in a CSS style sheet</a> <span class="uri">http://www.w3.org/International/techniques/authoring-html#css</span></p>
		</li>
		<li>
			<p>Related links, <cite>Setting up a server</cite> – <a href="/International/techniques/server-setup#charset">Characters</a> <span class="uri">http://www.w3.org/International/techniques/server-setup#charset</span></p>
		</li>
	</ul>
</div>
<?php echo $bottomOfPage; ?>

	</body>
</html>

