At-Rules

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
@font-face describes the details of a font

The charset at-rule (@charset)

The charset at-rule specifies the character set of an external style sheet.

@charset "ISO-8859-1";

ISO-8859-1 : @charset "ISO-8859-1";
US-ASCII : @charset "US-ASCII";
UTF-8 : @charset "UTF-8";

This at-rule must be the first thing in the external style sheet.

@charset "ISO-8859-1";

/* 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 "ISO-8859-1";
@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
print for printers
braille for braille tactile feedback devices
embossed for braille printers (CSS only)
aural 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>
Example page