how can I print a web page with all its css style attached to the page?

Question

I want to add a print button to enable users to print my web page. However when I print all the css styles are lost. It seems the printer only keeps the basic html elements. If I also want to print out the page exactly as it looks like in a browser, what should I do? I mean if I use a color printer it will print a colorful page with css styles on it. When I use a black and white printer it should print light colors as white and dark colors as grey or black.

Answer 1

If you have media="screen" on your link element, try to remove it or replace with media="all".

Answer 2

Take a look at this and this, that should help.

Basically you need to add a css print statement.

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />