CSS At-Rules

At-rules are CSS instructions that begin with the @ symbol. They tell the browser to do something beyond styling a single element — import a file, define a font, apply styles conditionally, or create animations. Learning at-rules unlocks the organizational and advanced features of CSS.

The Most Common At-Rules

@import — Load Another CSS File

@import pulls in another CSS file and applies its styles. It must appear at the top of your stylesheet, before any other rules.

/* style.css */
@import url("reset.css");
@import url("typography.css");
@import url("components.css");

body {
  background: white;
}

Google Fonts uses @import:

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

Caution: Each @import is a separate HTTP request. Browsers download them one after another (not in parallel), which slows page load. For production sites, use <link> tags in HTML instead — those load in parallel.

@media — Responsive Conditional Styles

@media applies a block of CSS only when certain conditions are true — like the screen being smaller than a set width, or the device using a touch screen.

/* Base styles for all screens */
.container {
  width: 100%;
  padding: 16px;
}

/* Wider layout for screens over 768px */
@media (min-width: 768px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}

DIAGRAM — @media breakpoint:

Phone (500px wide):
┌──────────────────────┐
│ Full-width content   │
└──────────────────────┘

Tablet (900px wide):
┌────────────────────────────────┐
│   Centered, max 960px wide     │
└────────────────────────────────┘

@media supports a range of features:

• min-width / max-width — screen size
• orientation: portrait / landscape
• prefers-color-scheme: dark — user's OS theme
• prefers-reduced-motion: reduce — accessibility
• print — styles for printing

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Dark mode from OS setting */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #f0f0f0;
  }
}

/* Print-only styles */
@media print {
  nav, footer, .ads {
    display: none;
  }
}

@font-face — Use Custom Fonts

@font-face loads a font file from your server (or a URL) and gives it a name you can use throughout your CSS.

@font-face{ 
  font-family: "MyBrandFont";
  src: url("fonts/brand.woff2") format("woff2"),
       url("fonts/brand.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Show text immediately, swap font when loaded */
 }

h1, h2 {
  font-family: "MyBrandFont", sans-serif;
}

font-display: swap improves perceived performance — text shows in the fallback font instantly, then the custom font loads in smoothly.

@keyframes — Define Animations

@keyframes defines the steps of a CSS animation. You write what the element looks like at different points in time — 0% (start) through 100% (end) — and CSS handles the motion between them.

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.popup {
  animation: fadeIn 0.4s ease-out forwards;
}

DIAGRAM — @keyframes timeline:

Time:    0%          50%         100%
         ▼            ▼           ▼
Opacity: 0          0.5           1
Y Pos:  +20px       +10px         0px

Browser fills in all the frames between these points.

You can use any percentage values as keyframe stops:

@keyframes bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-30px); }
  60%  { transform: translateY(-15px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@supports — Feature Detection

@supports applies CSS only when the browser supports a specific property or value. It acts as a safety net for using modern CSS.

/* Fallback for all browsers */
.layout {
  display: flex;
}

/* Enhanced layout only if grid is supported */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Check for a specific value */
@supports (backdrop-filter: blur(10px)) {
  .glass-card {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.3);
  }
}

/* Negate — apply when NOT supported */
@supports not (display: grid) {
  .layout {
    float: left;
    width: 33%;
  }
}

@layer — Control the CSS Cascade

@layer lets you group CSS rules into named layers and control which layer wins when there are conflicts. Rules in later layers override rules in earlier layers, regardless of selector specificity.

/* Declare layer order */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer base {
  body { font-family: sans-serif; }
}

@layer components {
  .btn { padding: 12px 24px; background: blue; }
}

@layer utilities {
  .text-red { color: red; } /* Wins over .btn color */
}

@layer is especially useful when working with CSS libraries — you put the library's styles in a low-priority layer and your own styles override them without fighting specificity.

@charset — Character Encoding

Declares the character encoding of a CSS file. Always use UTF-8 and always place it as the very first line if you use it at all.

@charset "UTF-8";

Modern editors and servers handle encoding automatically. You rarely need this, but it is good to recognize it when you see it.

Nesting At-Rules

Some at-rules can contain others. For example, you can put @supports inside @media:

@media (min-width: 768px) {
  @supports (display: grid) {
    .layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  }
}

At-Rules Quick Reference

At-rules handle everything CSS needs to do that goes beyond simple element styling — loading resources, adapting to conditions, and organizing your code. Familiarity with them is the difference between writing basic CSS and writing professional, maintainable stylesheets.