Skip to main content

CSS At-rules and Functions: Complete Reference

1. CSS At-rules​

At-rules are CSS statements that control how CSS is processed or applied. They start with @.

@charset​

Specifies the character encoding of the stylesheet (must be the very first rule):

@charset "UTF-8";

@import​

Imports another stylesheet. Must appear before any other rule:

@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

/* ⚠️ Performance note: @import is render-blocking. Prefer <link> tags in HTML. */

@font-face​

Defines custom fonts for self-hosting:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2'),
       url('/fonts/inter-400.woff')  format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap; /* Show fallback immediately while font loads */
}

@media​

Applies styles based on device characteristics:

@media screen and (min-width: 768px) { /* Tablet and above */ }
@media print { body { font-size: 12pt; } }
@media (prefers-color-scheme: dark) { :root { --bg: #0f0f0f; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (hover: hover) { .btn:hover { background: red; } } /* Only on pointer devices */

@keyframes​

Defines animation sequences:

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@supports​

Feature detection — apply styles only if the browser supports a property:

@supports (display: grid) {
  .layout { display: grid; grid-template-columns: 1fr 3fr; }
}

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(0,0,0,0.85); } /* Fallback for no backdrop-filter */
}

@layer​

Defines cascade layers for better specificity management:

@layer reset, base, components, utilities;

@layer reset { *, *::before, *::after { box-sizing: border-box; } }
@layer base   { body { font-family: var(--font-body); } }
@layer components { .card { border-radius: var(--radius-md); } }
@layer utilities  { .text-center { text-align: center !important; } }

@property​

Declares typed, animatable custom properties (CSS Houdini):

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 45deg;
  inherits: false;
}

@container​

Container queries — style based on parent size, not viewport:

.card-wrapper { container-type: inline-size; container-name: card; }

@container card (min-width: 400px) {
  .card { display: flex; flex-direction: row; }
}

2. CSS Functions: Complete Reference​

Color Functions​

rgb(255, 99, 71)            /* Red, Green, Blue (0-255) */
rgba(255, 99, 71, 0.5)      /* + Alpha (0-1) */
hsl(9, 100%, 64%)           /* Hue (0-360°), Saturation%, Lightness% */
hsla(9, 100%, 64%, 0.5)     /* + Alpha */
oklch(65% 0.2 20)           /* Perceptual: Lightness%, Chroma, Hue */
color-mix(in srgb, red 30%, blue) /* Mix two colors */

Math Functions​

calc(100% - 80px)           /* Basic math across units */
min(10vw, 100px)            /* Returns smaller value */
max(10vw, 50px)             /* Returns larger value */
clamp(1rem, 5vw, 3rem)      /* min, preferred, max — fluid sizing */
round(12.4px, 1px)          /* Round to nearest unit (CSS4) */
abs(-10px)                  /* Absolute value */

Layout Functions​

repeat(3, 1fr)              /* CSS Grid: repeat 3 equal columns */
minmax(200px, 1fr)          /* Grid: between 200px and 1fr */
fit-content(300px)          /* As big as content, up to 300px */

Transform Functions​

translate(x, y)  translateX(n)  translateY(n)  translateZ(n)
rotate(angle)    rotateX(angle) rotateY(angle)
scale(n)         scaleX(n)      scaleY(n)
skew(x, y)
perspective(n)
matrix(a,b,c,d,e,f)

Filter Functions​

blur(5px)            /* Gaussian blur */
brightness(1.5)      /* >1 bright, <1 dim */
contrast(200%)       /* Increase contrast */
grayscale(100%)      /* Remove color */
sepia(50%)           /* Warm sepia tone */
saturate(200%)       /* Boost saturation */
hue-rotate(90deg)    /* Shift colors on wheel */
invert(100%)         /* Flip colors */
drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) /* Like box-shadow but follows shape */

Resource Functions​

url('/images/bg.jpg')               /* Load an external resource */
image-set(url('a.webp') 1x, url('a@2x.webp') 2x) /* Responsive images */
env(safe-area-inset-bottom)         /* CSS environment variable (notch safety) */
var(--custom-property, fallback)    /* CSS custom property */
attr(data-label)                    /* Read an HTML attribute value */