CSS At-rules
CSS at-rules start with an @ and instruct the browser how to behave — from responsive breakpoints with @media to animation steps with @keyframes and custom fonts with @font-face. Browse all 10 below, each with its syntax and live examples.
| Name | Description |
|---|---|
| @charset | Declares the character encoding of the stylesheet. Must be the very first thing in the file. |
| @container | Applies styles based on the size of a containing element rather than the viewport — container queries for modular components. |
| @font-face | Loads a custom font from a file so you can use it in font-family, defining the font name, source and descriptors. |
| @import | Loads an external stylesheet into the current one. Simple, but it can hurt performance by blocking parallel downloads. |
| @keyframes | Defines the steps of a CSS animation — the from/to or percentage waypoints that the animation property plays. |
| @layer | Declares cascade layers so styles win by layer order rather than by specificity, taming specificity conflicts. |
| @media | Applies styles only when a condition is met, most often a viewport width. The foundation of responsive design. |
| @page | Styles the page boxes when printing — margins, size and breaks for paged media. |
| @property | Registers a custom property with a type, initial value and inheritance — which crucially lets you animate it. |
| @supports | Applies styles only if the browser supports a given CSS feature — a feature query for progressive enhancement. |