CSS References

CSS At-rules Reference

An at-rule is a CSS statement that begins with an @ sign and gives an instruction to the CSS engine — how to import a stylesheet, when to apply a block of rules, how to define an animation, or how to load a font. This reference lists the at-rules you will use most, with their syntax and purpose.

At-rules table

At-rule	Purpose
@import	Imports an external stylesheet into the current one.
@charset	Declares the character encoding of the stylesheet.
@media	Applies rules only when the device/viewport matches a query.
@supports	Applies rules only if the browser supports a given feature.
@container	Applies rules based on the size of a container, not the viewport.
@keyframes	Defines the steps of a named animation.
@font-face	Defines a custom font and where to download it from.
@page	Styles printed pages (margins, size, page breaks).
@property	Registers a typed custom property with defaults.
@layer	Defines a cascade layer to control override order.
@namespace	Declares an XML namespace for selectors (rare).
@font-feature-values	Names OpenType feature values for font-variant.
@counter-style	Defines a custom list counter style.
@scope	Scopes rules to a subtree, limiting where they apply.

@media — responsive design

Media queries are the backbone of responsive design. They apply a block of CSS only when conditions like viewport width, orientation or user preferences are met.

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

@keyframes — animation steps

@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.panel { animation: slide-in 300ms ease-out; }

@font-face — custom fonts

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@supports — feature detection

Use @supports to progressively enhance: give a solid baseline, then add modern layout only where it is supported.

@supports (display: grid) {
  .cards { display: grid; gap: 16px; }
}

@layer and @container — modern cascade and layout

At-rule	Example	What it does
@layer	@layer reset, base, components;	Declares an explicit order for cascade layers so later layers win predictably.
@container	@container (min-width: 400px) { }	Styles an element based on its container's size — component-level responsiveness.
@property	@property --angle { syntax: "<angle>"; }	Registers a custom property so it can be animated and type-checked.

💡

Add font-display: swap to @font-face so text stays visible with a fallback font while your custom font downloads.