title: How to apply css to print div
body: <p>I am currently working on a project which was already done now it requires some enhancement.I will give you a slight jist of it.It has a search functionality and after clicking that name  displayed in the result it displays additional details.Now the client has asked to add the print option also,which will print the displayed .I have also implement this functionality.Now the main problem is that the print preview page does not take any css of the last page.I have used css int the HTML page only.Please see the code.I have referred <a href="https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div">Print the contents of a DIV</a> question .But it uses css externally.How could I use it when I have defined it internally.
  I know this might be a very basic question But I am very new to the CSS world.
  Thanks in advance...`</p>
  
  <p>Edit: I have applied the @print tag.But it was not taking the css even after that.Thats why I have voted to remain this question as unique</p>
  
  <p>P.S. I didnt code this piece of shit, someone else did<a href="https://i.stack.imgur.com/QC3mH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QC3mH.png" alt="1 image shows the result which has css.2nd image shows page after the print button is clicked.and does not have css"></a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script type="text/javascript"&gt;
  
  
  function printDiv(divName) {
  
   var printContents = document.getElementById(divName).innerHTML;
  
  
  
          '.td{'+
    ' width:205px;'+
   'margin-top:10px;'+
  'margin-bottom:10px;'+
  'margin-left:10px;'+
    '}'+
  
  'table{'+
  'border-collapse:collapse;'+
  'border:1px solid #FF0000;'+
  
  '}'+
  
  'table td{'+
  'border:1px solid #000;'+
  
  '}'
  
          '&lt;/style&gt;';
  
   w=window.open();
  
   w.document.write(printContent);
  
   w.print();
   w.close();
  }
  
  
  
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;style type="text/css"&gt;
    body {
      margin: 0;
      padding: 0;
  
     background: #FFFFFF;
      color: #000000;
      font: 85% "Open Sans", Tahoma, sans-serif;
  
    }
  
    .dataGrid {
      border: 1px solid #48627A;
      padding: 0;
  
      width: 99%;
      height: 100%;
  
      background: #FFFFFF;
      text-align: left;
    }
  .title {
  color: #004e90;
  font-weight: bold;
  font-family: "Open Sans", Tahoma, sans-serif;
  font-size: 12px;
  
  }
  
  .res td{
  
      font-size: 12px;
      font-family: open sans, arial;
      border-top: 1px solid #ddd;
      width: auto;
      padding: 4px;
  }
  
  
  
    .dataGridTitle{
      border: 1px solid #0D1115;
   padding-top: 1px;
      padding-right: 3px;
      padding-bottom: 1px;
      padding-left: 3px;
  
      background: #48627A;
      color: #FFFFFF;
      text-align: center;
  
      font: bold 0.8em verdana, arial, helvetica, sans-serif;
    }
  
    .dataGridElement{
      padding-top: 1px;
      padding-right: 3px;
      padding-bottom:1px;
      padding-left: 3px;
  
      background: #E8EAEA;
      color: #000000;
  
      font: 0.8em verdana, arial, helvetica, sans-serif;
    }
     .td{
  
     width:205px;
       font: verdana, arial, helvetica, sans-serif;
  
    }
    &lt;form&gt;
  
  &lt;div id="print"&gt;
  &lt;div class="dataGrid" style="margin-top:10px;margin-bottom:10px;margin-left:10px;" &gt;
                  &lt;h1 style="margin-top:10px;margin-bottom:10px;margin-left:10px;"  &gt;Partner Details&lt;/h1&gt;
                                  &lt;table class="res" style="table-layout:fixed; margin-top:10px;margin-bottom:10px;margin-left:10px;"  &gt;
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="username"&gt;Name&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td &gt;&lt;label for="username"&gt;{$item.partnername}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
  
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Address&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;&lt;label for="surname"&gt;{$item.address}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Contact Number&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;&lt;label for="surname"&gt;{$item.cnumber}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Contact Person&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.cperson}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Email&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.email}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;School Center&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.school_center}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
                                  
                         &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Training Date&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.t_date}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Certification Date&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.c_date}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;No.Teachers&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.no_teacher}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label for="surname"&gt;Teachers Certified&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td class = "td res" &gt;&lt;label for="surname"&gt;{$item.cert_teacher}&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;tr&gt;
                                  &lt;td class = "td title" &gt;&lt;label 
  
              &lt;/form&gt;
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
    
  
                                  
   
  
    
  
    
    </code></pre>
  </div>
  </div>
  </p>