What is a CSS at-rule?

An at-rule is a CSS statement that begins with an @ keyword and instructs the engine how to behave. Some are single statements ending in a semicolon, like @import, while others wrap a block of nested rules or descriptors, like @media or @font-face.

What is the difference between @media and @container?

@media queries characteristics of the viewport or device, so styles respond to the whole window. @container queries the size or style of a nearest ancestor declared as a container, letting a component adapt to the space it is actually given regardless of the viewport.

@layer declares cascade layers. Rules in an earlier layer lose to rules in a later layer regardless of specificity, which lets you order resets, frameworks and your own overrides predictably without specificity wars.

Where must @charset and @import go?

@charset must be the very first bytes of the stylesheet with no preceding whitespace or comments. @import statements must appear at the top of the file too, after any @charset and @layer-statement declarations, before any style rules.

@supports is a feature query: it applies its block only if the browser understands the property/value or selector you test. It lets you ship a modern layout while providing a fallback for engines that lack a feature, instead of guessing from user-agent strings.

CSS At-Rules Reference

This is a searchable reference for CSS at-rules — the @-prefixed instructions that configure the stylesheet, load resources, and apply styles conditionally. It covers the conditional group rules (@media, @supports, @container), the cascade and scoping rules (@layer, @scope), animation and font rules (@keyframes, @font-face), and modern additions like @property and @starting-style.

How it works

Every at-rule starts with @ and a keyword. There are two shapes. A statement at-rule ends in a semicolon and carries no body — @charset "UTF-8"; and @import url(reset.css); are examples, and these must appear at the very top of the file. A block at-rule wraps braces containing either nested style rules (a conditional group rule like @media or @supports) or a set of descriptors (like @font-face, which takes font-family, src and similar declarations rather than ordinary properties). The conditional group rules can be nested inside one another, so you can put a @supports inside a @media, and modern engines allow nesting them inside style rules too.

Nesting and ordering tips

Order matters for the statement rules: @charset first, then @layer statement declarations and @import, then everything else. Cascade layers from @layer resolve before specificity, so an unlayered rule beats any layered rule — keep that in mind when mixing layered frameworks with ad-hoc overrides. @container only works against an ancestor that has opted in with container-type, and @property lets a custom property declare its syntax, whether it inherits, and an initial-value, which is what unlocks smooth animation of custom properties.

Example

@layer reset, base, components;

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@container (min-width: 30rem) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

Everything runs in your browser; nothing you search is uploaded.

CSS At-Rules Reference

Email me this result

How it works

Nesting and ordering tips

Example