Loading lessons...
CSS At-rules & Functions Reference
CSS At-rules & Functions reference
The @ rules and () functions you'll actually use.
At-rules
| At-rule | Purpose | Example |
|---|---|---|
@import | Load another stylesheet | @import url("print.css"); |
@media | Conditional screen rules | @media (max-width: 600px) { } |
@supports | Feature detection | @supports (display: grid) { } |
@keyframes | Define animation steps | @keyframes fade { } |
@font-face | Load local font | @font-face { } |
@layer | Manage cascade layers | @layer base; |
@property | Typed custom property | @property --x { } |
@container | Container queries | @container (min-width: 300px) |
@page | Print page boundaries | @page { } |
Functions
| Function | Purpose | Example |
|---|---|---|
var() | Read custom property | var(--brand) |
calc() | Arithmetic | calc(100% - 40px) |
min() | Smallest | min(100%, 500px) |
max() | Largest | max(300px, 40vw) |
clamp() | min/preferred/max | clamp(1rem, 2vw, 3rem) |
rgb()/rgba() | Color | rgb(255 0 0 / 0.5) |
hsl()/hsla() | Color by hue | hsl(120 50% 50%) |
linear-gradient() | Color fade | linear-gradient(red, blue) |
radial-gradient() | Radial fade | radial-gradient(circle, red, blue) |
conic-gradient() | Wheel fade | conic-gradient(red, yellow, green) |
url() | Reference a resource | url(img.png) |
translate() | Move | translate(10px, 5px) |
rotate() | Rotate | rotate(45deg) |
scale() | Resize | scale(1.2) |
translate3d() | 3D move | translate3d(0,0,20px) |
blur(), grayscale(), etc. | Filter effects | blur(3px) |
attr() | Read HTML attribute | content: attr(data-num) |
counter() | Counter value | content: counter(toc) |
TL;DR
@import,@media,@supports,@keyframes,@font-face, the daily six.@layer,@property,@container, modern depth.- Functions: var(), calc(), min/max/clamp(), gradients, transforms.
- Filter() and counter() are your fun word-of-the-day.