At Rules in CSS
In CSS, @rules (or at-rules) are special statements that start with the @ symbol. They control how CSS behaves — such as applying styles conditionally, importing styles, defining animations, and more.
? Common CSS @rules:
| At-rule | Description |
|---|---|
@import | Imports external CSS files. |
@media | Applies styles based on media queries (e.g., screen size). |
@font-face | Defines custom fonts to use in your styles. |
@keyframes | Defines animations by setting keyframes. |
@supports | Applies styles if a browser supports a specific feature. |
@page | Used for paged media (e.g., print layout). |
@layer | Declares a layer for organizing styles with cascade control. |
@property | Registers custom properties (variables) with type & behavior (CSS Houdini). |
@scope | Scopes a set of styles to a specific element or tree (experimental). |
@namespace | Declares XML namespaces for use in selectors. |
? Examples:
@import
@import url("theme.css");@media
@media (max-width: 600px) { body { background: lightblue; }}@font-face
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2');}@keyframes
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }}@supports
@supports (display: grid) { .grid-container { display: grid; }}@layer (Cascade Layers)
@layer reset, base, components;@layer base { body { font-family: sans-serif; }}? Notes:
Some at-rules contain blocks (like
@media), others are standalone (like@import).They're essential for responsive design, animations, feature detection, and customization.
Would you like a breakdown of newer or more advanced at-rules like @layer, @scope, or @property in action?
