Un dels avantatges dels fulls d'estils CSS és que permeten als autors crear diferents estils, específics per cada medi, en un sol document. A aquestes alçades ja estareu força avesats a dissenyar per a visionar mitjançant una pantalla, però pensar en el visionat amb un altre medi encara no us resulta un hàbit. fins ara la versió per imprimir d'un document s'havia limitat a recrear-lo de diferent manera.

Podeu cercar qualsevol document en format (X)HTML i simplement donar-li un estil per a la impressió, sense haver de tocar les etiquetes del document. La preocupació entre la versió de la web i la versió per imprimir passen a ser una cosa del passat.

Primer de tot cal identificar els problemes que poden sorgir quan s'imprimeix directament una web:

• Alguns navegadors, como el Netscape o els de la família Mozilla tenen un problema a l'hora d'imprimir elements flotants. Si un element flotant està situat davant del fons de la pàgina a imprimir, la resta d'elements flotants desapareixerà i no es publicarà a la propera pàgina.
• El color de fons és negre o bé qualsevol altre.
• El text destaca massa poc.
• Les imatges un cop impreses, no tenen bona qualitat.
• Els menús de navegació, potser no han d'aparèixer en la impressió.
• No tenen sentit enllaços del tipus: "Cliqueu aquí".
• El tipus de lletra o la mida de la lletra, no queden bé un cop impreses.
• L'amplada del document no encaixa en el full.

Un full d'estils per a impressió funciona de la mateixa manera que qualsevol altre full d'estils, encara que només se'l crida a l'hora d'imprimir la pàgina. Perquè funcioni, cal inserir el següent codi a l'inici de cada pàgina d'HTML.

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

L'arxiu, print.css és el full d'estil per a la impressió, i l'atribut-valor media="print" indica que aquest arxiu CSS només serà cridat quan s'imprimeixen les pàgines. Hi ha molts altres medis que poden utilitzar fulls d'estils propis com reproductors d'MP3, mòbils, la televisió, projeccions, etc.

De forma general, caldrà que quan es premi el botó d'impressió, els fulls d'estils faci el següent:

• Eliminar els elements innecessaris. Normalment, el que hi ha a la versió impresa de la pàgina web és el logotip i el contingut de la pàgina, mentre que s'ha fet desaparèixer la capçalera i el menú o menús de navegació, un cop impresa la pàgina, no serveixen per a res.
• Molt sovint, també és convenient fer desaparèixer tot o una part del peu de la pàgina, sempre i quan no contingui dades o detalls importants, com l'adreça de correu, dades de contacte, etc.
• També pot donar-se el cas que no es vulguin incloure a la versió impresa, certs elements aïllats de la pàgina web.

El full d'estils d'impressió facilita la tasca de deslliurar-vos d'aquests elements, juntament amb la capçalera i menús de navegació. Només caldrà que afegiu a les divisions que heu assignat com capçalera i menús de navegació, per exemple <div id="capcelera"> i <div id="lateral">, el comandament de visualització display:none, de la següent manera:

#lateral, #capcelera, #peu {  
    display: none;  
 }  

Alguns fulls d'estil d'impressió canvien la mida de la lletra, habitualment a 12pt, però generalment no és una bona idea, ja que si els usuaris incrementen la mida de la lletra a la pantalla, llavors a la impressió també serà més gran… llevat que s'especifiqui una mida fixa de lletra en el full d'estil de la impressió.

Altres fulls d'impressió canvien el tipus de font, font-family, a un tipus de la família serif, per exemple Times New Roman, ja que són de més fàcil lectura en format imprès. Tant si trieu una opció com l'altre, cal que tingueu present que els usuaris poden sentir-se una mica desconcertats en veure, en el format imprès, un tipus de lletra diferent al de la pantalla.

També cal que tingueu en compte que, per defecte, les imatges i colors de fons no s'imprimeixen. De tal manera que potser en algun cas caldrà canviar el color del text per tal que hi hagi un contrast raonable del text en l'absència del fons.

Per posar en pràctica en el print.css el que s'ha explicat anteriorment, només cal que tingueu en compte un seguit de consells:

• Cal eliminar tot rastre d'elements de navegació. Un cop impresa la web, no serveix de res el menú de navegació, per tant cal eliminar tot allò que no formi part del contingut. Per això només s'han de cercar tots els identificadors i afegir display:none.
• Utilitzeu pt per determinar la mida del text. Els valors px, %, em, etc., són mides absolutes utilitzades per mostrar d'una mida determinada la informació en pantalla.
• Utilitzeu tipus de lletra llegibles. Un tipus de lletra, font, que es veu bé a la pantalla, un cop impresa segurament no es veu igual. El tipus d'Arial, Courier New per a ample fixe, etc., us poden ser molt útils.
• Utilitzeu l'ordre float:none. Els elements flotants donen problemes amb alguns navegadors. Elimineu tots els elements flotants que no necessiteu.
• Especifiqueu el fons i el color de lletra per defecte. El fons sempre blanc i la lletra amb un bon contrast, negre o similar.
  

  body {  
       background: #fff;  
       color: #000;  
  } 

• Per mostrar els enllaços utilitzeu el pseudo-selector a[href]:after . Els enllaços es mostraran de color blau i entre parèntesis, a la dreta del text enllaçat.
  

  a[href]:after {  
    content: " (Enllaç " attr(href) ")";  
    display: block;  
    color: blue;  
    text-decoration: none;  
  }