アットルール（@規則）は、セレクタとプロパティだけでは指定できない機能を補うために用意されています。アットルール（@規則）は、@キーワードとそれに続く部分から成ります。@キーワードとは、アットマーク（@）から始まって、次に識別子と呼ばれる文字列が続くものです。CSS2 の規格では識別子に import, charset, media, font-face, page の5つが定義されています。つまり、@importルール, @charsetルール, @mediaルール, @font-faceルール, @pageルールの5つがあります（なお、ここでは今後の UA の対応の見込みがないことから、CSS2.1 では削除予定にある @font-faceルールについての解説を省きます）。
@import url(xxx.css); @import "xxx.css";
@importルールの書式には2通りあります。最新の UA については、どちらの書式にも対応しています。@importルールはスタイルシートのリストの記述が長くなった場合に、そのリストを複数にわけて整理することで編集を容易にする場合などに有用です。指定方法は、@import に続いて、url(URI) の形式で、CSSファイルの所在を指定します。URI は相対URI、または絶対URI で指定します。最後に終了を示すセミコロン（;）を記述します。もうひとつの方法は、CSSファイルの中だけでなく、style要素の中でも外部の CSSファイルを取り込むために使うことができます。注意点として、これらのリストの中で @importルールは一番最初に記述する必要があります。
@import url(main.css);
@import url(sub.css);
body { ... }
......
<style type="text/css"> @import url(main.css); @import url(sub.css); </style>
@charset "Shift_JIS";
スタイルシートのルールセットがいくつも並べられたリストになっている CSSファイルの文字コードを指定します。@charset に続いて、「"文字コード"」のように文字コードをダブルクォーテーション（"）で括ります。日本語の文字コードには "Shift_JIS", "EUC-JP", "ISO-2022-JP", "UTF-8" などがあります。文字コードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。
CSS ではスタイルシートのリストを整理するためにコメントを入れる場合やフォント名、生成内容などで半角英数字以外の漢字や平仮名などの日本語の文字列を扱うことがあるため、スタイルシートを参照する文書が記述されている文字コードと外部から参照する CSSファイル自体の文字コードが異なると、日本語部分などの文字列が文字化けを起こし、UA がその部分のスタイル情報を正しく解釈することができないことがあります。このため文字コードが異なる場合は、@charsetルールで、CSSファイル自体の文字コードを指定すれば、UA がスタイル情報を正しく解釈できるように機能することが期待できます。注意点として、@charsetルールは、CSSファイルの中でのみ記述することができ、そのリストの中で一番最初に記述する必要があります。コメントや @importルールを先行させることも許されません。
@media screen,handheld,tv {
......
}
@media print {
......
}
@mediaルールは、特定のメディア（環境）に対してのみスタイル情報を適用できるように振り分けることができます。指定方法は、@media に続いて、メディアの種類を指定し、中括弧（{ }）で囲んで中には、指定のメディアにのみ適用する専用のスタイル情報を記述します。複数のメディアを指定する場合は、メディアの種類をカンマ（,）で区切って列記します。CSS2.1 で定義されているメディアの種類には次の10種類があります。
allscreenttytvprojectionprinthandheldbrailleembossedspeech（CSS2.0:aural）aural は speech に変更）(X)HTML では link要素と style要素に指定できる media属性と同じ役割ですが、media属性には点字プリンタを出力対象とする "embossed" は定義されていません。@mediaルールを使うことで、視覚環境用のスタイルと印刷用のスタイルなどを振り分けることができます。また、@mediaルールに Macintosh版Internet Explorer 5 が対応していないことから、通常のリストの中では Macintosh版Internet Explorer 5 用のスタイル情報を記述し、@mediaルールに対応している UA では Macintosh版Internet Explorer 5 用のスタイル情報を @media 内のスタイル情報で上書きしてしまうといったように、一部の UA の CSS のバグを回避するテクニックとしても活用されています。
@page {
......
}
コンピュータの画面は、文書の矩形（四角形の）領域を切り取って表示し、スクロール機構によって連続的にアクセス可能な連続メディアです。一方、ページメディアは、改ページによってアクセスされます。ページメディアとは、embossed（点字プリンタ）, print（プリンタ）, projection（プロジェクタ）を指します。handheld（携帯機器） と tv（テレビベースのウェブブラウザ）はページメディアと連続メディアの両方の特性を持つとされます。ページメディアは矩形（四角形の）領域のページボックスを生成して、文書をフォーマット化し、ページボックスを実際の紙や OHPシートに変換して出力します。
そこで、@pageルールはページメディアが印刷等でページとしてリソースを表示する際（プリントアウト時）の見た目を規定します。規定できるのはページの余白（マージン）や改ページ位置等で、orphansプロパティ, page-break-afterプロパティ, page-break-beforeプロパティ, page-break-insideプロパティ, widowsプロパティと云った専用のプロパティが用意されています。指定方法は @page に続いて、中括弧（{ }）で囲んだ中にページメディア用のスタイル情報を記述します。なお、現状では @pageルールに対応している UA はありません。