I have used you code and style and its working for me.
You might have not given the proper style path.
Ref:Print specific part of web page in ASP.Net
HTML
<form id="form1" runat="server">
<asp:Panel ID="pnlContents" runat="server">
<div id="horizontalTab">
Text for horizontalTab
</div>
<div class="resp-tabs-list">
Text for resp-tabs-list
</div>
<div id="tab-Testing">
Text of tab-Testing
</div>
<div class="print_mb">
Text of print_mb
</div>
<div class="fb-comments">
Text of fb-comments
</div>
<div class="headertxt">
Text of headertxt
</div>
<div class="print_div">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #18B5F0">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
</asp:Panel>
<br />
<asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick="return PrintPanel();" />
</form>
JavaScript
<script type="text/javascript">
function PrintPanel() {
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write("<html><head><LINK rel=\"stylesheet\" type=\"text/css\" href=\"css/print.css\" media=\"print\"></head><body>");
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
return false;
}
</script>
CSS
@media {
#horizontalTab { display: none !important; }
.print_div { display:block !important; }
.resp-tabs-list{ display: none !important; }
#tab-Testing{ display: none !important; }
.print_mb{ display:block !important;font-size : 16px !important; }
.fb-comments{ display: none !important; }
.headertxt{ font-size : 26px !important; }
}
Page design before print.
Print Preview.
Printed Page. Style has been applied and here is your printed page.
