How can i apply CSS to print?

Question

I am trying to print a div in one of my pages but i can\'t apply css when printing. Writing media=\"print\" inside of the style tags doesn\'t work. What should i do?

Answer 1

I'm using the Jquery Print Element 1.2 plugin to print only the content of a div. This way, you don't need to set css display:none for all those elements you don't want to print.

I know it's not a straight answer on your question, but see it as a kind suggestion.

Example:

$('SelectorToPrint').printElement();

Here's my implementation using the classNameToAdd option:

function printDiv(divToPrint) {

   $('#' + divToPrint).printElement(
        {
            printBodyOptions:
            {
                classNameToAdd: 'printarea'

            }
        }
   );

}

Once you've added the plugin to your page you can call the above function when the users clicks the print button/link.

Print part of the page

You can download this plugin and find more documentation here.