How to print inline CSS styles?

Question

is there a way to print css styles, that are inline?

I use this code to print part of the code:

w=window.open();
w.document.write($('#printable').html());
w.print();
w.close();

I could use external file and make it media=print, but part of the html are chars, that are generated by php and I could make it by making class for every posible outcome, but that would be pain.

Any ideas? Thanks.

Answer 1

See the Demo: http://jsfiddle.net/rathoreahsan/x69UY/

What do you think if you do like this:

<div id="printableDiv">
    <style type="text/css">
        @media print {
            #printable { 
               color: red; 
               // Any Other style you want to add 
             }
        }
    </style>
    <div id="printable">
        This Text will print in red color.
    </div>
</div>

Javascript/jQuery code:

w=window.open();
w.document.write($('#printableDiv').html());
w.print();
w.close();

In this scenario while a popup opens and gets the HTML of printableDiv, the styles for printer will be included in that popup so the printer will read styles from popup and will print in that manner.