Es muy difundido hoy en día el CSS dentro del diseño de sitios web, y existe una gran exigencia por parte del usuario para que se puedan ver bien sus sitios en las más diferentes plataformas y los ya innúmeros browsers. Un importante medio que no es muy utilizado, y que sin embargo es muy fácil de ser aplicado para un resultado óptimo, es el de crear una hoja de estilos exclusivamente para que la página, y los ítems que desees sean impresos de la mejor forma posible, permitiendo al usuario ahorrar tinta y mejorar la visualización del contenido. Para esto, es necesaria una hoja de estilos nueva y el llamado respectivo entre :

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

Lo primero a realizarse es duplicar la hoja de estilo del sitio, hecha para la distribución del contenido para pantallas (media=“screen”). No queremos trabajar doble, escribiendo todo el código CSS nuevamente. A partir de ahora, muchos valores deben ser reemplazados de px o em a cm y pt. Así que debes tener claro los tamaños y tipos de conversiones a ser realizadas.

Un importante paso es tener claro qué es lo que queremos imprimir. Si todo el sitio, o solamente un artículo y el encabezado, o el imagotipo + menues + contenido… enfin, queda en ti saber cuál es el fin que persigues. En este artículo presentaré algo general, para que puedas profundizar y customizar tu mismo código como te dé la gana.

Teniendo claro qué mostrar o qué no quiero que se imprima, a desmenuzar el código. El principal atributo será display: none; el que permite esconder lo que lo contiene, pero sin perder el espacio que lo soporta. Comencemos con un menú:

div#menu {<br />
   width: 300px;<br />
   color: #333;<br />
   font-size: 11px;<br />
   background: #999;<br />
} 




  Si queremos que el menú desaparezca:



div#menu {<br />
   display: none;<br />
}

Es necesario hacer esto con todo lo que no se requiere que se vea impreso. Se debe cuidar tb la diagramación, mientras mejor fluya el texto (más si el texto es largo) mejor. Para un mejor orden, se puede justificar el texto (text-align: justify;) y las imágenes se pueden posicionar usando float: left; o float: right;

También será necesario darle un pequeño margen a los lados, para que el contenido no se vea muy a corte. 10% por cada lado será suficiente. Otro punto importante es el fondo, no queremos que se imprima el color o pattern que corresponda por lo que en body:

body {<br />
   background: transparent;<br />
}

Sobre el tema de los links, a veces es importante que se sepa que existe un enlace en cierto texto, por lo que se le aplica un simple código:

a:link, a:visited {<br />
   color: #666;<br />
   font-weight: bold;<br />
   text-decoration: underline; <br />
   background: transparent;<br />
}

Esto nos da un color más suave que el resto del texto (si el texto es negro #000) y un underline para mayor diferenciación.

Un buen truco y sólo en browsers que soportan bien CSS2, es el siguiente código:

a:after {<br />
   content: " ( http://www.csslab.cl " attr(href) " ) ";<br />
   font-size: small;<br />
}

Nuevamente, esto funciona para Firefox (Mozilla) y Netscape. Lo que hace es desplegar, luego del link, la URL entre paréntesis [en este caso, CSSLab (http://www.csslab.cl) ].

Creo que eso es todo. Suerte y no gasten mucha tinta.