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 |