CSS At-Rules Reference

CSS at-rules are directives that provide instructions to the CSS engine before regular style rules are processed. These rules give CSS more power and flexibility by enabling conditions, modularization, and advanced styling mechanisms.

This tutorial contains a complete reference of all CSS at-rules, including standard, experimental, deprecated, and browser-specific rules.

What Are at-Rules in CSS?

  • Start with an @ symbol and perform special behavior not achievable with selectors alone.
  • Allow conditional logic based on media, feature support, or container properties.
  • Enable modular structure by importing external stylesheets or defining custom layers.
  • Support font management and registration of font variations or stylistic sets.
  • Used in layout, animations, responsive design, and font control at a higher level.

Alphabetical CSS @rules Directives

At-Rule Description
@animation-worklet Registers custom animation worklets via CSS Houdini.
@annotation Declares annotation-style glyphs such as ruby for supported fonts.
@character-variant Applies specific character variants from a font to targeted text.
@charset Declares CSS stylesheet character encoding.
@color-profile Associates an ICC color profile with styles.
@container Applies styles when container matches conditions.
@counter-style Creates custom counter styles for list numbering.
@custom-media Allows you to define and reuse custom media query aliases
@document Applies rules based on document URL patterns.
@font-face Specifies downloadable custom font resources.
@font-feature-values Defines named OpenType font feature settings.
@font-palette-values Defines custom color palettes for fonts that support colored glyphs.
@import Loads external stylesheets before other rules.
@keyframes Declares intermediate steps for CSS animations.
@layer Groups rules into named cascade layers.
@media Applies nested rules based on media queries.
@-moz-document Mozilla-specific rule that applies styles based on document URL patterns
@namespace Defines XML namespace prefixes for selectors.
@ornaments Defines alternate ornamental glyphs available in the font face.
@page Defines page dimensions and margins for print.
@position-try Defines fallback positioning for anchored elements.
@property Defines custom CSS properties with type validation.
@region Defines named regions for CSS exclusions.
@scope Limits selector scope to a given element context.
@scroll-timeline Defines scroll-linked animation timing functions.
@starting-style Applies styles at the start of a view transition before animation begins.
@stylistic Enables stylistic sets provided by a font as user-defined options.
@styleset Activates predefined stylistic sets in OpenType fonts for styling.
@supports Applies rules if specified CSS features are supported.
@swash Specifies decorative swash glyphs in a font for specific content.
@view-transition Enables smooth transitions between document views.
@viewport Configures viewport size and orientation.
@-webkit-keyframes WebKit-prefixed version of @keyframes for defining CSS animations