CSS at-rules - CSS | MDN * Skip to main content * Skip to search HTML HTML: Markup language HTML reference * Elements * Global attributes * Attributes * See all… HTML guides * Responsive images * HTML cheatsheet * Date & time formats * See all… Markup languages * SVG * MathML * XML CSS CSS: Styling language CSS reference * Properties * Selectors * At-rules * Values * See all… CSS guides * Box model * Animations * Flexbox * Colors * See all… Layout cookbook * Column layouts * Centering an element * Card component * See all… JavaScript JS JavaScript: Scripting language JS reference * Standard built-in objects * Expressions & operators * Statements & declarations * Functions * See all… JS guides * Control flow & error handing * Loops and iteration * Working with objects * Using classes * See all… Web APIs Web APIs: Programming interfaces Web API reference * File system API * Fetch API * Geolocation API * HTML DOM API * Push API * Service worker API * See all… Web API guides * Using the Web animation API * Using the Fetch API * Working with the History API * Using the Web speech API * Using web workers All All web technology Technologies * Accessibility * HTTP * URI * Web extensions * WebAssembly * WebDriver * See all… Topics * Media * Performance * Privacy * Security * Progressive web apps Learn Learn web development Frontend developer course * Getting started modules * Core modules * MDN Curriculum * Check out the video course from Scrimba, our partner Learn HTML * Structuring content with HTML module Learn CSS * CSS styling basics module * CSS layout module Learn JavaScript * Dynamic scripting with JavaScript module Tools Discover our tools * Playground * HTTP Observatory * Border-image generator * Border-radius generator * Box-shadow generator * Color format converter * Color mixer * Shape generator About Get to know MDN better * About MDN * Advertise with us * Community * MDN on GitHub Blog Toggle sidebar * Web * CSS * Reference * At-rules Theme * OS default * Light * Dark English (US) Remember language Learn more * Deutsch * English (US) * Français * 日本語 * 中文 (简体) CSS at-rules At-rules are CSS statements that instruct CSS how to behave. They are used to group and structure style rules and other at-rules, declare style information not directly associated with selected content, and manage syntactic constructs such as imports and namespaces keyword mappings. They begin with an at-sign, @ (U+0040 COMMERCIAL AT), followed by an identifier. In this article * Index of at-rules and at-rule descriptors * Index of media features * Specifications * See also Index of at-rules and at-rule descriptors * @charset * @color-profile * @container * @counter-style * additive-symbols * fallback * negative * pad * prefix * range * speak-as * suffix * symbols * system * @custom-media * @document * @font-face * ascent-override * descent-override * font-display * font-family * font-feature-settings * font-stretch * font-style * font-variation-settings * font-weight * line-gap-override * size-adjust * src * unicode-range * @font-feature-values * font-display * @font-palette-values * base-palette * font-family * override-colors * @function * @import * @keyframes * @layer * @media (see list of media features in the next section) * @namespace * @page * page-orientation * size * @position-try * @property * inherits * initial-value * syntax * @scope * @starting-style * @supports * @view-transition Index of media features * -moz-device-pixel-ratio * -webkit-animation * -webkit-device-pixel-ratio * -webkit-transform-2d * -webkit-transform-3d * -webkit-transition * any-hover * any-pointer * aspect-ratio * color * color-gamut * color-index * device-aspect-ratio * device-height * display-mode * dynamic-range * forced-colors * grid * height * horizontal-viewport-segments * hover * inverted-colors * monochrome * orientation * overflow-block * overflow-inline * pointer * prefers-color-scheme * prefers-contrast * prefers-reduced-data * prefers-reduced-motion * prefers-reduced-transparency * resolution * scan * scripting * shape * update * vertical-viewport-segments * video-dynamic-range * width Specifications Specification CSS Syntax Module Level 3 See also * CSS at-rule functions * Nesting at-rules * CSS syntax module * CSS conditional rules module Help improve MDN Yes No Learn how to contribute This page was last modified on Dec 2, 2025 by MDN contributors . View this page on GitHub • Report a problem with this content Clear filter input * CSS * Guides * Modules * Anchor positioning * Animations * Backgrounds and borders * Basic user interface * Borders and box decorations * Box alignment * Box model * Box sizing * Cascading and inheritance * Color adjustment * Colors * Compositing and blending * Conditional rules * Containment * Counter styles * CSSOM view * Custom functions and mixins * Custom highlight API * Custom properties for cascading variables * Display * Easing functions * Environment variables * Filter effects * Flexible box layout * Font loading * Fonts * Fragmentation * Gaps * Generated content * Grid layout * Images * Inline layout * Lists and counters * Logical properties and values * Masking * Media queries * Motion path * Multi-column layout * Namespaces * Nesting * Overflow * Overscroll behavior * Paged media * Positioned layout * Properties and values API * Pseudo-elements * Round display * Ruby layout * Scoping * Scroll anchoring * Scroll snap * Scroll-driven animations * Scrollbars styling * Selectors * Shadow parts * Shapes * Syntax * Table * Text * Text decoration * Transforms * Transitions * Values and units * View transitions * Viewport * WebXR DOM overlays * Will change * Writing modes * Anchor positioning * Using anchor positioning * Handling overflow * Anchored container queries * Animations * Animatable properties * Using animations * Backgrounds and borders * Using multiple backgrounds * Resizing background images * Scaling SVG backgrounds * Borders and box decorations * border-shape nav menu * Box alignment * Overview * In block layout * In flexbox * In grid layout * In multi-column layout * Box model * Introduction * Margin collapsing * Box sizing * Aspect ratios * Cascade * Introduction * Inheritance * Specificity * Property value processing * Shorthand properties * Cascading variables * Using custom properties * Colors * Applying color * Color values * Using relative colors * Using color wisely * Accessibility: Colors and luminance * Accessibility: Color contrast * Columns * Basic concepts * Styling columns * Using multi-column layouts * Spanning and balancing columns * Handling overflow * Handling content breaks * Conditional rules * Using feature queries * Using container scroll-state queries * Containment * Container queries * Using containment * Using container size and style queries * Counters * Using counters * CSSOM view * Coordinate systems (API) * Viewport concepts * Custom functions and mixins * Using CSS custom functions * Display * Block and inline layout * Flow layout * Flow layout and overflow * Flow layout and writing modes * In flow and out of flow * Layout and the containing block * Formatting contexts * Block formatting context * Inline formatting context * Using multi-keyword syntax * Visual formatting model * Environment variables * Using environment variables * Filter effects * Using filter effects * Flexbox * Basic concepts * Flexbox and other layouts * Aligning flex items * Ordering flex items * Controlling flex item ratios * Wrapping flex items * Typical use cases * Fonts * OpenType features * Variable fonts * WOFF * Grid * Basic concepts * Grid and other layouts * Using line-based placement * Grid template areas * Using named grid lines * Using auto-placement * Aligning items * Logical values and writing modes * Grid layout and accessibility * Common grid layouts * Subgrid * Grid lanes layout * Images * Using gradients * Using object-view-box * Styling replaced elements * Implementing image sprites * Lists * Indenting lists * Logical properties * Basic concepts * For floating and positioning * For margins, borders, and padding * For sizing * Masking * Introduction * Clipping * Multiple masks * Mask properties * Media queries * Using media queries * For accessibility * Testing * Printing * Nesting * Nesting at-rules * Nesting and specificity * Using nesting * Overflow * Creating carousels * Positioning * Stacking context * Stacking floating elements * Understanding z-index * Using z-index * Stacking without z-index * Properties and Values API * CSS Houdini * Registering custom properties in CSS * Scroll anchoring * Overview * Scroll-driven animations * Scroll-driven animation timelines * Understanding timeline insets * Understanding timeline range names * Scroll snap * Basic concepts * Using scroll snap events * Selectors * Selectors and combinators * Selector structure * Privacy and :visited * Using :target * Shapes * Overview * Box-value shapes * Image-based shapes * Using shape-outside * Shape generator * Syntax * Introduction * Comments * At-rules * Error handling * Text * Wrapping and breaking text * Handling whitespace * Text decoration * Text shadows * Transforms * Using transforms * Transitions * Using transitions * Values and units * Value definition syntax * Numeric data types * Textual data types * Using math functions * Using typed arithmetic * Writing modes * Introduction * Vertical form controls * How to * Layout cookbook * Media objects * Column layouts * Center an element * Sticky footers * Split navigation * Breadcrumb navigation * List group with badges * Pagination * Card * Grid wrapper * Contribute a recipe * Cookbook template * Tools * * Border-image generator * Border-radius generator * Box-shadow generator * Color format converter * Color mixer * Shape generator * Reference * Properties * -moz-* * -moz-float-edge * -moz-force-broken-image-icon * -moz-orient * -moz-user-focus * -moz-user-input * -webkit-* * -webkit-border-before * -webkit-box-reflect * -webkit-mask-box-image * -webkit-mask-composite * -webkit-mask-position-x * -webkit-mask-position-y * -webkit-mask-repeat-x * -webkit-mask-repeat-y * -webkit-tap-highlight-color * -webkit-text-fill-color * -webkit-text-security * -webkit-text-stroke * -webkit-text-stroke-color * -webkit-text-stroke-width * -webkit-touch-callout * Custom properties (--*): CSS variables * accent-color * align-* * align-content * align-items * align-self * alignment-baseline * all * anchor-name * anchor-scope * animation-* * animation-composition * animation-delay * animation-direction * animation-duration * animation-fill-mode * animation-iteration-count * animation-name * animation-play-state * animation-range * animation-range-end * animation-range-start * animation-timeline * animation-timing-function * animation * appearance * aspect-ratio * backdrop-filter * backface-visibility * background-* * background-attachment * background-blend-mode * background-clip * background-color * background-image * background-origin * background-position * background-position-x * background-position-y * background-repeat * background-repeat-x * background-repeat-y * background-size * background * baseline-shift * baseline-source * block-size * border-* * border-block * border-block-color * border-block-end * border-block-end-color * border-block-end-style * border-block-end-width * border-block-start * border-block-start-color * border-block-start-style * border-block-start-width * border-block-style * border-block-width * border-bottom * border-bottom-color * border-bottom-left-radius * border-bottom-right-radius * border-bottom-style * border-bottom-width * border-collapse * border-color * border-end-end-radius * border-end-start-radius * border-image * border-image-outset * border-image-repeat * border-image-slice * border-image-source * border-image-width * border-inline * border-inline-color * border-inline-end * border-inline-end-color * border-inline-end-style * border-inline-end-width * border-inline-start * border-inline-start-color * border-inline-start-style * border-inline-start-width * border-inline-style * border-inline-width * border-left * border-left-color * border-left-style * border-left-width * border-radius * border-right * border-right-color * border-right-style * border-right-width * border-shape * border-spacing * border-start-end-radius * border-start-start-radius * border-style * border-top * border-top-color * border-top-left-radius * border-top-right-radius * border-top-style * border-top-width * border-width * border * bottom * box-* * box-align * box-decoration-break * box-direction * box-flex * box-flex-group * box-lines * box-ordinal-group * box-orient * box-pack * box-shadow * box-sizing * break-* * break-after * break-before * break-inside * caption-side * caret-* * caret-animation * caret-color * caret-shape * caret * clear * clip-path * clip-rule * clip * color-* * color-interpolation * color-interpolation-filters * color-scheme * color * column-* * column-count * column-fill * column-gap * column-height * column-rule * column-rule-break * column-rule-color * column-rule-inset-cap-end * column-rule-style * column-rule-visibility-items * column-rule-width * column-span * column-width * column-wrap * columns * contain-* * contain-intrinsic-block-size * contain-intrinsic-height * contain-intrinsic-inline-size * contain-intrinsic-size * contain-intrinsic-width * contain * container-name * container-type * container * content-visibility * content * corner-* * corner-block-end-shape * corner-block-start-shape * corner-bottom-left-shape * corner-bottom-right-shape * corner-bottom-shape * corner-end-end-shape * corner-end-start-shape * corner-inline-end-shape * corner-inline-start-shape * corner-left-shape * corner-right-shape * corner-shape * corner-start-end-shape * corner-start-start-shape * corner-top-left-shape * corner-top-right-shape * corner-top-shape * counter-* * counter-increment * counter-reset * counter-set * cursor * cx * cy * d * direction * display * dominant-baseline * dynamic-range-limit * empty-cells * field-sizing * fill-opacity * fill-rule * fill * filter * flex-* * flex-basis * flex-direction * flex-flow * flex-grow * flex-line-count * flex-shrink * flex-wrap * flex * float * flood-color * flood-opacity * font-* * font-family * font-feature-settings * font-kerning * font-language-override * font-optical-sizing * font-palette * font-size * font-size-adjust * font-smooth * font-stretch * font-style * font-synthesis * font-synthesis-position * font-synthesis-small-caps * font-synthesis-style * font-synthesis-weight * font-variant * font-variant-alternates * font-variant-caps * font-variant-east-asian * font-variant-emoji * font-variant-ligatures * font-variant-numeric * font-variant-position * font-variation-settings * font-weight * font-width * font * forced-color-adjust * frame-sizing * gap * grid-* * grid-area * grid-auto-columns * grid-auto-flow * grid-auto-rows * grid-column * grid-column-end * grid-column-start * grid-row * grid-row-end * grid-row-start * grid-template * grid-template-areas * grid-template-columns * grid-template-rows * grid * hanging-punctuation * height * hyphenate-character * hyphenate-limit-chars * hyphens * image-* * image-orientation * image-rendering * image-resolution * initial-letter * inline-size * inset-* * inset-block * inset-block-end * inset-block-start * inset-inline * inset-inline-end * inset-inline-start * inset * interactivity * interest-* * interest-delay * interest-delay-end * interest-delay-start * interpolate-size * isolation * justify-* * justify-content * justify-items * justify-self * left * letter-spacing * lighting-color * line-* * line-break * line-clamp * line-height * line-height-step * link-parameters * list-* * list-style * list-style-image * list-style-position * list-style-type * margin-* * margin-block * margin-block-end * margin-block-start * margin-bottom * margin-inline * margin-inline-end * margin-inline-start * margin-left * margin-right * margin-top * margin-trim * margin * marker-* * marker-end * marker-mid * marker-start * marker * mask-* * mask-border * mask-border-mode * mask-border-outset * mask-border-repeat * mask-border-slice * mask-border-source * mask-border-width * mask-clip * mask-composite * mask-image * mask-mode * mask-origin * mask-position * mask-repeat * mask-size * mask-type * mask * math-* * math-depth * math-shift * math-style * max-* * max-block-size * max-height * max-inline-size * max-width * min-* * min-block-size * min-height * min-inline-size * min-width * mix-blend-mode * object-* * object-fit * object-position * object-view-box * offset-* * offset-anchor * offset-distance * offset-path * offset-position * offset-rotate * offset * opacity * order * orphans * outline-* * outline-color * outline-offset * outline-style * outline-width * outline * overflow-* * overflow-anchor * overflow-block * overflow-clip-margin * overflow-inline * overflow-wrap * overflow-x * overflow-y * overflow * overlay * overscroll-* * overscroll-behavior * overscroll-behavior-block * overscroll-behavior-inline * overscroll-behavior-x * ov