At-Rule

An at-rule is a CSS rule for the CSS engine instead of matching with the element tag. Therefoe the @rule can be used as a CSS statement to instruct how the CSS engine to behave.

Syntax of At-Rule

An at-rule statement begins with an at sign, "@ (U+0040)", followed by a keyword identifier, and ends with a semicolon, "; (U+0030)" or the next CSS block "{⋯}".

@identifier (rule);
@identifier (rule) {⋯}

Types of At-Rule

There are a few types of at-rule with different syntax according to the function.

Regular At-Rule

The identifier is used to identify the function and the following rule is usually the corresponding value to be specified. The regular at-rule is specific CSS rule for initializing the CSS engine.

Nested At-Rule

The identifier is used to identify the function and the following rule can contain a subset of additional statements that may also be nested, is usually the corresponding value to be specified. The nested at-rule is a general CSS rule that can be used as a general style sheet statement and a rule set inside conditional group ruels. According to the nature of nested at-rule, teh nested at-rule can further be grouped into ordinary nested at-rule and conditional nested at-rule, also called conditional group rule.

Ordinary Nested At-Rule

The ordinary nested at-rule is used as a ordinary specific CSS rule for CSS engine in CSS style sheet along with CSS rule set for elements. The identifier is used to identify the function and the following rule is usually the corresponding value to be specified.

@font-face An @font-face at-rule is used to specify the external font needed by the style sheet and nest the detailed information of the corresponding font in the additional statement subset. @font-face {  font-family: 'WebFont';
src: url('webfont.woff2') format('woff2'); }

Conditional Nested At-Rule

@media An @media at-rule is a media matching rule used to specify the nested subset of additional CSS statement according to the specified conditions. @media only screen and (max-width: 600px) { body { background-color: lightblue;}}