Con CSS podemos manipular y tener control de un documento HTML para su impresión, e incluso ver la vista previa antes de mandarlo a imprimir dicho documento HTML en el mismo navegador.

Con la etiqueta link, tiene un atributo que es la media, donde especificados en que medio utilizar dichos estilos.

Aquí el formato

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

con media, especificamos el medio la cual se aplicaran el estilo definido en href

Veamos un ejemplo:

[code language=»css»]
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Incluir un archivo CSS para impresion&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style_print.css&quot; media=&quot;print&quot;&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Mi primer titulo&lt;/h1&gt;

&lt;h2&gt;Un ejemplo del titulo&lt;/h2&gt;

El concepto de paisaje es utilizado tanto por la geografía, por el arte, e incluso por la literatura. Si bien todas estas acepciones son diferentes, tienen como base común que encontramos uno o mas observadores que se enfrentan a una extensión de terreno, destacándose generalmente por características que lo hacen diferenciarse (ya sean positivas o negativas).

&lt;img src=&quot;image/Paisaje.jpg&quot; align=&quot;center&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;
[/code]

Código del archivo “Style.css”

[code language=»css»]
body{
background-color: black;
}

h1,h2 {
padding: 10px;
background-color: gray;
color: white;
}

p{
padding: 15px;
font-family: monospace;
color: white;
font-size: 16px;
}

img {
width: 400px;
display: block;
margin: 10px auto;
}
[/code]

Código del archivo “style_print.css” para su impresión.

[code language=»css»]
body{
background-color: white;
}
h1,h2 {
background-color: white;
color: black;
font-size: 16px;
border-bottom: black 1px dashed;
}
p{
font-family: monospace;
font-size: 14px;

}

img{
display: none;
}
[/code]

Como vemos, en el archivo style_print.css, lo que hacemos es poner el fondo en blanco y quitar la imagen, porque solo nos interesa imprimir el texto.