CSS At-Rules Reference

Complete reference of all CSS at-rules

About This Reference

At-rules are CSS statements that begin with an at sign (@) and instruct CSS how to behave. They provide special instructions to the CSS engine, ranging from importing stylesheets to defining animations, managing responsive designs, and controlling the cascade.

At-rules can be simple (like @import) or block-based with nested rules (like @media and @keyframes). This reference covers all standard at-rules, organized by their primary purpose.

Media & Conditional Rules

At-Rule Description Links
@media Apply styles based on device characteristics (screen size, orientation, color scheme, etc.) Demo Spec
@supports Feature detection queries - apply styles only if browser supports specific CSS features Spec
@container Container-based responsive design - apply styles based on parent container size Demo Spec

Animation Rules

At-Rule Description Links
@keyframes Define animation sequences with intermediate steps between start and end states Demo Spec
@starting-style Define styles for element's first render, enabling entry animations from display:none or newly inserted elements Spec

Font Rules

At-Rule Description Links
@font-face Define custom web fonts by specifying font files and font family names Demo Spec
@font-feature-values Define named values for OpenType font features (swashes, stylistic sets, etc.) Spec
@font-palette-values Customize color palettes for color fonts (COLRv0/COLRv1) Spec

Cascade & Scoping Rules

At-Rule Description Links
@layer Define cascade layers for better control over specificity and rule ordering Demo Spec
@scope Scope styles to a specific DOM subtree with root and optional limit selectors Demo Spec
@position-try Define fallback positions for anchor-positioned elements when preferred position overflows Spec

Custom Property Rules

At-Rule Description Links
@property Register typed custom properties with syntax, inheritance, and initial values Demo Spec

Import & Encoding Rules

At-Rule Description Links
@import Import external stylesheets into the current stylesheet Spec
@charset Specify character encoding for the stylesheet (must be first rule if present) Spec

Namespace Rules

At-Rule Description Links
@namespace Define XML namespaces for use in namespace-qualified selectors Spec

Counter & List Rules

At-Rule Description Links
@counter-style Define custom counter styles for lists and generated content Spec

Color Management Rules

At-Rule Description Links
@color-profile Define custom color profiles for advanced color management Spec

View Transition Rules

At-Rule Description Links
@view-transition Configure view transitions for smooth page navigation animations Spec

Specialized/Legacy Rules

At-Rule Description Links
@document Restrict styles to specific URLs (deprecated, Firefox only) Spec

Resources & Tools

Demo