Configurar las páginas con CSS para imprimir o guardar en PDF

En este artículo comparto como les agrego a varias páginas de mi sitio web, una porción de código en CSS, que permite que se puedan imprimir o guardarlas en formato PDF, usando un estilo correcto y fácil de leer.
Facilitar a los visitantes de nuestro blog o sitio web la impresión de los artículos y su conversión a PDF.
Ejemplos prácticos.

Estilo de las páginas al imprimir o guardar como PDF

En las versiones más recientes de Windows 10, ahora es posible guardar los documentos o páginas web en formato PDF, desde cualquier navegador, editor de texto o desde otras aplicaciones, usando la opción Imprimir y la impresora virtual "Microsoft Print to PDF".
De esta forma los lectores pueden guardar las páginas en ese formato, para consultarlas o leerlas sin conexión a internet o transferir el archivo a un dispositivo móvil.
Por eso es que los desarrolladores y todos los que poseemos un blog o sitio web, debemos preocuparnos porque nuestras sus páginas luzcan correctamente a la hora de imprimirlas o de guardar en PDF.
A continuación mostramos la vista previa en el navegador Google Chrome de esta misma página.
En el primer caso del modo tradicional y en el segundo caso usando "media print" en CSS, para especificar el estilo.

No es nada difícil lograrlo, solo necesitamos agregar una simples instrucciones en CSS.

Modificar con CSS el formato de una página web a imprimir

Para definir el estilo que debe tener una página web al imprimirla o guardarla como PDF, necesita cargar una hoja de estilo externa o interna, pero usando la propiedad "media print".
Por ejemplo, el estilo normal se define con la propiedad "media screen" de la siguiente forma:
- En una hoja de estilo externa:

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

- En una hoja de estilo interna:

<style rel="stylesheet" type="text/css" media="screen">
Estilo para ver en el navegador
</style>

El estilo para imprimir se define con la propiedad "media print" de la siguiente forma:
- En una hoja de estilo externa:

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

- En una hoja de estilo interna:

<style rel="stylesheet" type="text/css" media="print">
Estilo solo para imprimir
</style>

En el archivo externo CSS, que puede servir para varias páginas o en el interno, necesitamos especificar el estilo, ocultando elementos innecesarios o configurando como se deben mostrar los visibles.

Ejemplo de una hoja de estilo PRINT.CSS

Ejemplo de la hoja de estilo print.css que usamos en las páginas de nuestro sitio web.

<style type="text/css" media="print">
#sidebar, .bsocial, #post3, #up, .btn, #migaspan{display:none;}
h1{margin:12px 0 -6px 0;}
h2, h3{margin:0px 0 -6px 0;}
.entry{line-height:24px;}
</style>

En ella ocultamos los siguientes elementos: barra lateral, botones de compartir, widgets sociales, breadcrumb; además aumentamos el interlineado (espacio entre líneas) y el margen de los encabezados (h1, h2, h3).
También es posible aumentar o disminuir el tamaño de la fuente, ocultar la publicidad, etc.