CSS para imprimir páginas web

Cómo hacer una hoja de estilo CSS distinta para la visualización de la página en el navegador y otra para la impresión en una impresora.
A veces necesitamos que nuestra página se imprima en una impresora de manera distinta a como se visualiza en la página web. Por ejemplo, si en una página se muestra un informe con datos que se desea guardar impreso en papel, probablemente deseemos que en la impresora se muestre con una fuente más pequeña, para que se pueda comprimir todo el contenido de manera que quepa en un folio. También es posible que en los informes deseemos que aparezca el logo de la compañía centrado en la cabecera del informe.

Todo esto se puede hacer con CSS. Las Hojas de Estilo en Cascada sirven para definir el aspecto de la página, y estos estilos se pueden declarar de manera distinta a la hora de imprimir un documento y a la hora de verlo en el navegador.

Con CSS se puede definir estilos en un documento externo, de esta manera:

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

Con esto suponemos que tenemos un archivo llamado estilos.css, que está en el mismo directorio de la página, donde se definen los estilos del documento.

Referencia: Las diferentes maneras de incluir estilos en una web están comentadas en nuestro Manual de CSS.

De modo parecido, podemos asignar una hoja de estilos externa para definir el aspecto cuando un usuario imprime la página web:

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

Lo único que cambia es el atributo media="print", que indica que esta hoja de estilos es sólo para cuando se va a imprimir la web.

Ejemplo de dos hojas css distintas para impresión y visualización

Ahora veamos un ejemplo de página web que tiene dos hojas de estilo distintas, una para cuando se está en el navegador y otra cuando se va a imprimir.

El ejemplo se puede ver en marcha en una página aparte.

Tenemos un HTML que incluye dos hojas de estilos y dispone varias capas, que luego maquetaremos o posicionaremos con CSS.

<html>
<head>
   <title>informe superpuzzles</title>
   <link rel="STYLESHEET" type="text/css" href="estilo.css">
   <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">
</head>

<body>

<div id="contenedor">
    <div id="cabecera">
      Superpuzzles
    </div>
   <div id="logo">
       <img src="logo.gif">
   </div>
   <div id="cuerpo">
    <div id="lateral">
    <ul>
       <li><a href="#">Enlace 1</a>
       <li><a href="#">Vínculo 2</a>
    </ul>
    </div>
    <div id="derecha">
       <div id="principal">
Contenido de un posible informe
       </div>
    </div>
   </div>
    <div id="pie">
    © 2005 DesarrolloWeb.com
    </div>
</div>

</body>
</html>

Como se ha podido ver en el HTML anterior, se han incluido dos archivos CSS con estilos. El primero es estilo.css, que es el estilo que se utilizará al visualizar la página en el navegador. El segundo link con una hoja de estilos CSS es estilo_imprimir.css, que definirá el aspecto de la página al imprimirla (fijarse en el atributo media="print" de la etiqueta).

Los códigos CSS son muy parecidos, simplemente hemos hecho un par de cambios para ilustrar lo que venimos diciendo. En la visualización de la página no se mostrará la capa con id="logo". Por su parte, al imprimir la página no se mostrará la barra de navegación de la izquierda y los contenidos centrales se mostrarán en todo el ancho del espacio de impresión. Tampoco se mostrará la capa id="cabecera".

El código CSS de visualización en navegador

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}

#logo{
visibility:hidden;
display: none;
}

#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #d0d0ff;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffff;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}

#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}

#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 580px;
float: left;
}

#principal table{
background-color: #ffffff;
width: 580px;
border: 2px solid #cccccc;
font-size:10pt;
}

El código CSS que se utilizará para la impresión de la página

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 0 10 0px;
   text-align: center;
    background-color: #ffffff;
}
#contenedor{
    text-align: left;
    width: 600px;
    margin: auto;
}
#cabecera{
   visibility:hidden;
   display: none;
}

#logo{
   visibility:visible;
   display: block;
   margin-left: 20px;
}

#cuerpo{
    margin: 10 0 10 0px;
}
#lateral{
   visibility:hidden;
   display: none;
}

#pie{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
   clear: both;
}

#principal{
    background-color: #ffffff;
    padding: 0 0 0 20px;
    width: 600px;
    float: left;
}

#principal table{
   background-color: #ffffff;
    width: 600px;
   border: 2px solid #cccccc;
   font-size:10pt;
}


Nuevamente, ponemos el enlace para que se pueda ver la página del ejemplo de estilos de impresión CSS.

Nota: Si queremos ver cómo se imprimiría la página, pero sin necesidad de utilizar la impresora (para no gastar papel ni tinta o si no tenemos impresora), podemos acceder al menú Archivo - Vista preliminar de nuestro navegador.

Esperamos que este taller de css para imprimir haya sido de utilidad. Queremos daros un enlace a otro taller en el que se explica cómo evitar, con CSS, que una página se imprima.

Autor

Ana Alvarez

Directora de contenidos de Estilo y Moda .com

Compartir

Comentarios

diego

14/8/2007
Muy útil para los que vamos empezando. Gracias por el tiempo que has empleado en hacerlo.

Simón R.

31/10/2007
Hola.
Hay un enlace para ver 'la página de imprimir' con CSS.
¿Podría haber otro para la página 'normal', o sea la que no contiene css para imprimir?

Saludos poco imaginativos
de Simón

Dahir

16/2/2008
Muy bueno y práctico

William

24/9/2008
Amigo,

no se de cuando es el articulo porque no vi la fecha pero hoy en dia me mandado el tremendo salvón, muchas gracias por tu aporte.

De verdad se agradece monton... hasta en chino estaba buscando esta solucion.

Saludos

jose manuel

09/2/2009
Me gustaria saber como puedo ademas de ocultar ciertos contenidos de la pagina que deseo imprimir, lograr incorporar un encabezado y pie de pagina que se repita tantas veces como paginas tenga el contenido a imprimir

katherine

30/8/2010
como Imprimir paginas web
Estoy trabajando con una base de datos y quisiera imprimir los resultados mostrados en pagina web, el problema es que las hojas son de diferentes tamaños: A4, officio y no se como hacer para que se impriman en el tamaño correcto

ilanit diseño web

04/5/2011
Muchas Gracias!
Me sirvio mucho el articulo! Muchas gracias!

Domingo Hernàndez

22/7/2014
Eliminar cabecera
Esta muy bien la explicación y el ejemplo, pero tengo un detalle a ver si se puede solucionar y es el siguiente: ¡¿como eliminar de la parte superior de la pantalla el texto ( imforme superpuzzle y la ruta http:,....)? con esto quedaría un reporte limpio.
Gracias de antemano