Sono costrutti particolari, tutti preceduti dalla chiocciola e sono sintassi alternative che però possono rivelarsi molto più potenti. Alcune @-rules devono essere dichiarate appena dopo il tag <style>, come nel caso di @import.

@import

Utilizzata per richiamare all’interno del documento un foglio di stile esterno. E' anche possibile definire il supporto per il quale dovrà essere applicato il css:

<style type=”text/css”>
@import url(stile_di_stampa.css) print;
</style>
 

@media

Serve ad impostare una visualizzazione diversa per ogni dispositivo e supporta tutti gli attributi visti in precedenza: all, screen, print, projection, aural, braille, embossed, hendheld, tty, tv.

<style type="text/css">
@media screen {
      p{color:yellow;background-color:black}
}
@media print{
      p{color:black;background-color:white}
}
</style>


@charset

La @-roules @charset ha la stessa funzione del metatag

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 

Questa è la sua sintassi:

@charset “iso-8859-1”