Lesson 1: Introducing CSS3 CHAPTER 4 143
Specifying the character encoding of the style sheet
To specify the character encoding of the style sheet text, use the @charset rule at the top of
your style sheet. To be compatible with all browsers, be sure to place this on the first line of
your CSS file. The following is an example of a CSS file that sets the character set to UTF-8,
which is the most common character set that is usable with Unicode characters.
@charset 'UTF-8';
body {
background-color: white;
color: gray;
}Note that if your HTML document has a <meta> element that describes the character set
of the HTML document, that setting overrides the @charset setting in the CSS file. The follow-
ing is an example of using the <meta> element in an HTML document.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' >
<link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>
<body></body>
</html>If all your HTML documents specify the <meta> element with the @charset setting, you
don’t need the @charset rule in the CSS file. If the CSS file will be shared and you want to
ensure that the style sheet character set is correct, you should specify the @charset rule.Imported style sheets from other style sheets
As your style sheet grows, you will want to break it into smaller, more manageable files. The
@import rule enables you to import a CSS file to the current style sheet. You can specify as
many @import rules as you need, but the @import rules must be at the top of your style
sheet, before any other content except the @charset rule. If you even have a comment above
the @import rules, they will not work properly.
The following is an example of creating a main style sheet file that combines several other
style sheet files.
@charset 'UTF-8';
@import url('/Content/header.css');
@import url('/Content/menu.css');
@import url('/Content/sidebar.css');
@import url('/Content/mainContent.css');
@import url('/Content/footer.css');
body {
background-color: white;
color: gray;
}