<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div>
    Hola, soy un div con contenido aleatorio
  </div>
  <div id="imprimible">
    Hola, yo soy otro div con el id imprimible<br>
    Puedo llevar <br>saltos de línea<br>
    También 
    <ul>
      <li>Elementos</li>  
      <li>de una</li>  
      <li>Lista</li>  
    </ul>
    <h1>Encabezados</h1>
    <h2>De todos</h2>
    <h3>Los tamaños</h3>
    <p>Y <strong>todo</strong> lo que pueda ser <i>creado</i>
    usando <code>html</code></p>
  </div>
  <button id="btnImprimir">Imprimir</button>

  <script src="script.js"></script>
</body>

</html>
// Code goes here

function imprimirElemento(elemento) {
  var ventana = window.open('', 'PRINT', 'height=400,width=600');
  ventana.document.write('<html><head><title>' + document.title + '</title>');
  ventana.document.write('<link rel="stylesheet" href="style.css">');
  ventana.document.write('</head><body >');
  ventana.document.write(elemento.innerHTML);
  ventana.document.write('</body></html>');
  ventana.document.close();
  ventana.focus();
  ventana.onload = function() {
    ventana.print();
    ventana.close();
  };
  return true;
}

document.querySelector("#btnImprimir").addEventListener("click", function() {
  var div = document.querySelector("#imprimible");
  imprimirElemento(div);
});
/* Styles go here */

h1{
  color: blue;
}
p{
  padding: 18px;
  background-color: pink;
}