CSS At-rules Reference

❮ Previous Reference Next ❯

The At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first.

Standard Syntax

Regular

/* General structure */
@identifier (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";

There are several regular at-rules, designated by their identifiers, each with a different syntax:

@charset - Defines the character set used by the style sheet.
@import - Tells the CSS engine to include an external style sheet.
@namespace - Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

Nested

@identifier (RULE) {
}

A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

@media - A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.
@supports - A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
@page -Describes the aspect of layout changes that will be applied when printing the document.
@font-face - Describes the aspect of an external font to be downloaded.
@keyframes - Describes the aspect of intermediate steps in a CSS animation sequence.
@counter-style - Defines specific counter styles that are not part of the predefined set of styles. (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
@layer - Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.

CSS At-rules Reference

The table below lists of all CSS At-rules reference:

Alphabetical Order	Property	Description
@charset	Specifies the character encoding used in the style sheet.
@counter-style	Define counter styles that are not part of the predefined set of styles.
@font-face	Used to associate a font name to be used in a style sheet with some downloadable font.
@import	Define style rules for multiple media types in a single embedded style sheet.
@keyframes	Specifies the animation code.
@layer	Used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
@media	Define style rules for multiple media types in a single embedded style sheet.
@namespace	Defines XML namespaces to be used in a CSS style sheet.
@page	Used to modify some CSS properties when printing a document.
@supports	Specify CSS declarations that depend on a browser's support for CSS features.
@viewport	Configure the viewport through which the document is viewed.

❮ Previous Reference Next ❯