Regras at-rules (ou @rules) CSS são assim chamadas porque elas utilizam o caractere @ (“at”). Elas não são muito utilizadas como os outros elementos CSS, então se você estiver confuso sobre elas, aqui vai um guia rápido:

@charset

É usado para especificar o charset de sua folha de estilos (externa). É encontrada no topo de seu arquivo, e geralmente se parece com isso:

@charset “iso-8859-1″;

@import

É usado para importar uma outra folha de estilos, da seguinte forma:

@import url(novafolhadeestilos.css);

@import geralmente é usado para ocultar estilos de browsers antigos, que não os reconhecem muito bem. Desta forma é usado em conunto com a tag <link>.

@media

Aplicará seu conteúdo apenas ao tipo de mídia especificado. Algumas de suas opções são:

  • all – qualquer mídia
  • aural – sintetizadores de voz
  • braille – braile
  • handheld – para dispositivos portáteis
  • print – para impressoras
  • screen – para telas de computadores

Por exemplo, eu poderia especificar que para as impressoras, todo o texto deve ser negrito em uma fonte com serifa. Eu faria isso:

@media print { body {font-family:serif; font-weight:bold;} }

@font-face

É um método de especificar e embudir fontes de sua escolha no design de seu site. Para saber mais, consulte o Google Font Directory.

Este artigo é uma tradução livre de: http://www.devlounge.net/code/demystifying-css-at-rules