At-rules

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 include everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first.

Syntax

Statement at-rules

css

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

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

Statement at-rules end in a semicolon. There are several statement 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.

Note: Strictly speaking, @charset is not an at-rule, but a special byte sequence that's stripped before processing the content. Read its reference for more information.

Block at-rules

css

@identifier (RULE) {
}

Block at-rules end in {}-block containing a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

@counter-style: Defines specific counter styles that are not part of the predefined set of styles.
@container: A conditional group rule that will apply its content if the container meets the <container-condition>s.
@font-face: Describes the aspect of an external font to be downloaded.
@font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant): Define common names in font-variant-alternates for feature activated differently in OpenType.
@keyframes: Describes the aspect of intermediate steps in a CSS animation sequence.
@layer: Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.
@media: A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.
@page: Describes the aspect of layout changes that will be applied when printing the document.
@property: Describes the aspect of custom properties and variables.
@scope: A conditional group rule that will apply its content if the device meets the criteria of the given condition.
@starting-style: A conditional group rule that will apply starting transition if the browser meets the criteria of the given condition.
@supports: A conditional group rule that will apply its content if the browser meets the criteria of the given condition.

Index

Specifications

Specification
CSS Conditional Rules Module Level 3
Compatibility Standard # css-at-rules