Crear versión reducida con CSS

[cristian_cena]

hola nachetee, si, en realidad es mucho más sencillo de lo que parece, mira, supongamos que tenes este titulo
<h1>titulo</h1>

luego creas dos hojas de estilos
en la 1ra, llamemosla 'estilos.css' escribes:
h1{color:red;}

y en la 2da, llamemosla 'deimpresion.css' escribes:
h1{color:blue;}

luego llamas a las dos hojas de estilos en el head:

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

Esto hará que tu título se imprima de color azul y se presente en color rojo para todos los demás medios visuales.

Esto trasladalo a cualquier cosa, ejemplo tu contenedor, si cambias el width para impresión pues cambiará y se imprimirá con otro ancho.

Cabe aclarar que esto:
<link rel="stylesheet" type="text/css" href="estilos.css">
será tomado por todos los medios visuales ya que no le declaramos el atributo media. Esto otro funciona de igual forma:
<link rel="stylesheet" type="text/css" media="all" href="estilos.css">

En tal caso que desees que esa hoja de estilos se vea solo en pantalla agregas media="screen"

y asi con los demás medios.

Espero te sea útil, un saludo.