Media Types,

[frijolerou]

Con @media tu le indicas al CSS en qué momento activar los atributos definidos.

Ejemplo:

@media screen{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print{
p.test {font-family:times,serif; font-size:10px}
}

Con eso le estas diciendo que cuando el parrafo de clase "test" sea mostrado en pantalla, lo haga con la fuente Verdana a un tamaño de 14px. Pero que sea mostrado con una Times de 10px cuando el visitante quiera imprimir dicho texto.

Pero en realidad esto s ehace llamando 2 hojas de estilo distintas, una para mostrar el documento en pantalla y la otra para visualizar el documento impreso.

<link href="estilo1.css" type="text/css" rel="stylesheet" media="screen">
<link href="estilo2.css" type="text/css" rel="stylesheet" media="print">

De esta manera te manejas con dos hojas de estilo:
estilo1.css que esta especialmente elaborada para ver la pagina en pantalla.
estilo2.css que esta elaborada especialmente para cuando quieran imprimir la pagina (en este segundo estilo puedes ocultar elementos d ela pagina que no quieres que se impriman, asi sólo dejas lo justo y necesario)