Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Reference

CSS At-rules

Written by Published

A practical map of the at-rules used to import, condition, organize, animate, and describe CSS. The reference groups statement and block at-rules for imports, conditions, layers, scope, fonts, animation, properties, counters, and paged output.

An at-rule begins with @ and changes how CSS is organized, conditioned, or described. At-rules do not share one grammar: placement, descriptors, and allowed nesting depend on the specific rule.

Some at-rules load resources before ordinary rules, some wrap conditional style rules, and others describe resources such as fonts or animations. Recognizing the category helps determine whether the contents are declarations, descriptors, keyframes, or another list of style rules. This topic also connects with CSS Media Queries and CSS Animations.

Statement and block at-rules

At-rules begin with @. Some end with a semicolon; others contain a block of declarations or nested rules.

  • @charset declares encoding and, when used, must come first.
  • @import loads another stylesheet before ordinary rules.
  • @namespace declares namespaces used by selectors.
  • @media, @supports, and @container apply conditional rules.
  • @layer establishes cascade priority groups.
  • @scope limits selectors to a subtree.
  • @font-face describes downloadable fonts.
  • @keyframes defines animation stages.
  • @property registers a typed custom property.
  • @page controls paged-media dimensions and margins.
  • @counter-style defines a custom list marker system.

Example

css

@media (width >= 48rem) {
  @supports (display: grid) {
    .layout { display: grid; }
  }
}

Common At-rules

At-rulePurposeTypical form
@mediaApplies rules according to a media condition.@media (width >= 48rem)
@supportsTests CSS syntax support.@supports (display: grid)
@containerQueries an ancestor container.@container card (width > 30rem)
@keyframesDefines animation stages.@keyframes fade { ... }
@font-faceDescribes a downloadable font.@font-face { ... }

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS At-rules example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

@media (width >= 48rem) {
  @supports (display: grid) {
    .layout { display: grid; }
  }
}
  </style>
</head>
<body>
  <main class="layout"><h1>Nested conditional rules</h1><p>The layout becomes a grid only when both conditions are understood.</p></main>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
@supports2812229
@container10510511016
@property858512816.4

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

  • Placement rules differ. For example, @import cannot be inserted after ordinary style rules. Check the specific at-rule before nesting or reordering it.
  • Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
  • Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Check each at-rule’s placement and nesting rules; the @ prefix does not make their grammar interchangeable.

Use the reference as a map, then consult the rule’s grammar when placement matters. Pay particular attention to ordering restrictions for imports, the difference between descriptors and ordinary properties, and the browser range for newer organizational rules such as layers and scope.

PreviousDebugging CSSNextCSS Functions