> Manuales > Taller de CSS

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.

Ana Alvarez Sanchez

Escritora de críticas y análisis de productos en el ámbito de la salud, bienesta...

Manual