At-rules

An at-rule is an instruction or directive to the CSS parser. It starts with an at-keyword: an @ character followed by an identifier. An at-rule can comprise a block delimited by curly braces, {}, or text terminated by a semicolon, ;. An at-rule’s syntax will dictate whether it needs a block or text—see CSS At-rules for more information.

Parentheses, brackets, and braces must appear as matching pairs and can be nested within the at-rule. Single and double quotes must also appear in matching pairs.

Here’s an example of an at-rule that requires a block—the @media at-rule:

@media print {
  body {
    font-size: 12pt;
  }
}

Here’s an example of an at-rule terminated by a semicolon—the @import at-rule:

@import url(base.css);

User-contributed notes

Related Products