Salah satu fitur terpenting dari stylesheet adalah dapat digunakan pada berbagai media, seperti halaman, layar, synthesizer elektronik, dll. Properti tertentu hanya dapat berfungsi pada media tertentu. Misalnya, properti "ukuran font" hanya berlaku pada jenis media yang dapat digulir (layar).
Mendeklarasikan atribut media dapat diperkenalkan menggunakan @import atau @media:
Berikut kutipannya:
@impor url(loudvoice.css) pidato;
@media cetak {
/* style sheet untuk pencetakan ada di sini */
}
Media juga dapat dimasukkan dalam markup dokumen:
Berikut kutipannya:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
Dapat dilihat bahwa perbedaan antara @import dan @media adalah @import memperkenalkan stylesheet eksternal untuk jenis media, sedangkan @import secara langsung memperkenalkan atribut media. Metode penggunaan @import adalah dengan menambahkan alamat URL file style sheet ke @import dan kemudian menambahkan tipe media. Beberapa media dapat berbagi style sheet, dan tipe media dipisahkan oleh pemisah ",". Penggunaan @media adalah mengutamakan jenis media, dan aturan lainnya pada dasarnya sama dengan aturan yang ditetapkan. Berbagai jenis media tercantum di bawah ini:
LAYAR: Mengacu pada layar komputer.
CETAK: Mengacu pada media buram yang digunakan dengan printer.
PROYEKSI: mengacu pada proyek yang digunakan untuk tampilan.
BRAILLE: Sistem Braille, mengacu pada barang cetakan dengan efek sentuhan.
AURAL: mengacu pada penyintesis ucapan elektronik.
TV: Mengacu pada media jenis televisi.
HANDHELD: mengacu pada perangkat tampilan genggam (layar kecil, monokrom)
SEMUA: Cocok untuk semua media.