What You’ll Learn

At-rules extend CSS beyond normal selectors. They declare encoding, import other files, register custom fonts, and define animation keyframes. This hub explains what at-rules are, when to use each one, and links to full tutorials with four try-it examples each.

Introduction

In CSS, at-rules are special statements that begin with @ and control how stylesheets behave. Unlike regular rules that target HTML elements with selectors, at-rules handle encoding, file imports, custom fonts, animations, and more.

What Are CSS At-Rules?

An at-rule provides meta-instructions to the browser about your stylesheet. Some end with a semicolon (@import, @charset); others use a block with curly braces (@font-face, @keyframes).

At-rules enable modular CSS, custom typography, and motion effects that would be impossible with selectors alone. Understanding placement rules — especially for @charset and @import — prevents subtle parsing bugs.

At-Rules vs Regular Rules

• Regular rule — p { color: blue; } — selector + declaration block.
• At-rule — @import url("theme.css"); — starts with @, special syntax.
• Related — @media is also an at-rule (covered in the Media Queries section).

📝 Syntax

Common at-rules side by side:

/* Must be first (if used) */
@charset "UTF-8";

/* Before other rules */
@import url("variables.css");

/* Custom font registration */
@font-face {
  font-family: MyFont;
  src: url("myfont.woff2") format("woff2");
}

/* Named animation steps */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Placement rules

• @charset — first in file; only one allowed
• @import — after @charset, before all other rules
• @font-face / @keyframes — anywhere, often grouped at top

Common at-rules on this site:

When to Use Each At-Rule

• @charset — External CSS files with non-ASCII characters when encoding might be ambiguous.
• @import — Splitting a project into theme, reset, and component files inside one entry stylesheet.
• @font-face — Loading brand fonts not available on user systems.
• @keyframes — Multi-step animations beyond simple transitions.
• @media — Different styles for screen sizes, print, or reduced motion (separate tutorial section).

Examples Gallery

Five snippets showing each at-rule in action. Open the linked tutorials for live try-it editors.

@charset "UTF-8";

body {
  font-family: system-ui, sans-serif;
}

@import url("variables.css");
@import url("components.css");

body {
  margin: 0;
}

@font-face {
  font-family: BrandFont;
  src: url("brand.woff2") format("woff2");
}

h1 {
  font-family: BrandFont, sans-serif;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fadeIn 2s ease-in-out;
}

💬 Usage Tips

• Order matters — Put @charset and @import at the very top.
• Prefer link for critical CSS — Use <link> in HTML for faster parallel downloads.
• woff2 first — In @font-face, list modern formats before fallbacks.
• Name keyframes clearly — Use descriptive names like slideUpMenu not anim1.
• Group at-rules — Keep fonts and keyframes in dedicated partial files.

⚠️ Common Pitfalls

• @import after rules — Browsers ignore @import not at the top.
• Comments before @charset — Strict parsers may reject anything before @charset.
• Chained @import — Nested imports slow loading; prefer flat structure or HTML links.
• Missing font formats — Provide woff2; add fallbacks for older browsers if needed.
• Animation without keyframes — animation: fadeIn fails if @keyframes fadeIn is missing.

💡 Best Practices