Mattepuffo.com

In genere siamo abituati a includere i nostri CSS nella pagina senza usare l'attributo media.

In verità è un attributo molto importante perchè ci permette di differenziare i CSS a seconda del dispositivo che accede alla pagina.

Un tipo lo abbimo già visto in questo articolo, ed è quello relativo alla stampa:

<link type="text/css" rel="stylesheet" href="/site/template/css/print.css" media="print" /> 

Come vedete ho usato il media print.

Vediamo una lista abbastanza completa di media-type:

all -> per tutti i dispositivi
braille -> specficio per i dispositivi di feedback tattile
embossed -> specifico per stampanti Braille
handheld -> specifico per palmari
print -> per la stampa in generale
projection -> specifico per presentazione da proiettare
screen -> specifico per schermi a colori
speech -> specifico per sintetizzatori vocali
tty -> specifico per i media che usano una griglia a caratteri con dimensione fissa (come i terminali)
tv -> specifico per i dispositivi TV

In generale o non troviamo nulla o screen per il web, e print se si vuole impaginare il testo specifico per la stampa.

Come avete visto prima basta impostare il media quando includete il foglio di stile.

Un'altra opzione sennò impostare il tutto direttamente dentro al file CSS:

@media print {
    body {
         font-size: 15px;
    }
}
 
@media screen {
    body {
        font-size: 12px;
    }
}

Questa forma però è poco usata perchè in generale sarebbe meglio tenere separati i vari stili!