title: Print html page with current css
body: <p>I want to print some identified div in an html page with it's current css.  </p>
  
  <p>When I try to print the page via "ctrl+p" the css is included. But if I do this action via button the print screen doesn't include the css.</p>
  
  <p>Any suggestion ? Thank you.. </p>
  
  <p>My code samples;</p>
  
  <pre><code>&lt;head&gt;
          &lt;link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen"&gt;
          &lt;link rel="stylesheet" href="bootstrap.css" type="text/css" media="print"&gt;
  
          &lt;link rel="stylesheet" href="cssFile.css" type="text/css" media="screen"&gt;
          &lt;link rel="stylesheet" href="cssFile.css" type="text/css" media="print"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>I'm using same css files both link which include screen media attribute and print media attribute. Is this method suitable ? Should I write a new css for print in js function ?</p>
  
  <p>I also tried adding css file in js function.</p>
  
  <pre><code>&lt;script&gt;
      $( document ).ready(function() {
          $("#button").click(function(){
              var divId = "div";
  
              window.frames["print_frame"].document.head.innerHTML='&lt;link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="print"&gt; &lt;link rel="stylesheet" href="css/cssFile.css" type="text/css" media="print"&gt;';
              window.frames["print_frame_ssd"].document.body.innerHTML=document.getElementById(divId).innerHTML;
              window.frames["print_frame"].window.focus();
              window.frames["print_frame"].window.print();
          }); 
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>&lt;div id="div"&gt;
     content..
     &lt;iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>