At-Rules
At-Rules start with an '@' character.
| At-Rules | Explanation |
|---|---|
| @charset | specifies the character set of an external style sheet |
| @import | imports an external style sheet |
| @media | specifies the media to which the style should be applied |
| @page | defines a page box (Not posted) |
| @font-face | describes the details of a font (Not posted) |
The charset at-rule (@charset)
The charset at-rule specifies the character set of an external style sheet.
@charset "UTF-8";
UTF-8 : @charset "UTF-8";
ISO-8859-1 : @charset "ISO-8859-1";
US-ASCII : @charset "US-ASCII";
This at-rule must be the first thing in the external style sheet.
@charset "UTF-8";
/* External style sheet file */
body { margin: 0; }
h1 { color: red; }
p { line-height: 140%; }
The import at-rule (@import)
The import at-rule imports an external style sheet file to the current style sheet.
@import url("example.css");
The quotation marks can be omitted.
@import url(example.css);
This at-rule can also be specified as follows.
@import "example.css";
The quotation marks cannot be omitted.
The media type can be specified for this at-rule.
@import url(example1.css) screen;
@import url(example2.css) tv, projection;
@import "example1.css" screen;
@import "example2.css" tv, projection;
In the external style sheet
When you use this at-rule in the external style sheet, it must be the first thing in the external style sheet.
@import url(example.css);
/* External style sheet file */
body { margin: 0; }
h1 { color: red; }
p { line-height: 140%; }
If you specify the charset at-rule at the same time, place it first.
@charset "UTF-8";
@import url(example.css);
/* External style sheet file */
body { margin: 0; }
h1 { color: red; }
p { line-height: 140%; }
In the internal style sheet
When you use this at-rule in the internal style sheet, it must be the first thing inside the STYLE element.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
@import url(example.css);
/* Internal style sheet */
body { margin: 0; }
h1 { color: red; }
p { line-height: 140%; }
</style>
</head>
<body>
</body>
</html>
The media type can be specified as follows.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
</body>
</html>
The media at-rule (@media)
The media at-rule specifies the media to which the style should be applied.
| Media types | Explanation |
|---|---|
| screen | for computer screens |
| tty | for fixed-pitch character grid displays |
| tv | for television-type devices |
| projection | for projectors |
| handheld | for handheld devices |
| for printers | |
| braille | for braille tactile feedback devices |
| embossed | for braille printers (CSS only) |
| aural (speech) |
for speech synthesizers |
| all | for all devices |
@media screen {
strong { color: red; }
}
In the above example, the style is applied to computer screens.
@media screen, print {
strong { color: red; }
}
You can apply the same style to multiple media types by separating each type with a comma. In the above example, the style is applied to computer screens and printers.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
@media screen {
body { text-align: center; }
h1 { color: red; }
}
@media print {
h1 { text-decoration: underline; }
ul { display: none; }
}
</style>
</head>
<body>
<h1>Example page</h1>
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../index.html">CSS Properties</a></li>
<li><a href="index.html">Relation Document</a></li>
</ul>
<p>The difference of the style can be confirmed by the browser's print preview.</p>
</body>
</html>
