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" />

Answer 3

CSS style-sheets have an attribute media. It specifies to what media this css is applicable. Possible media types are listed here.

<style type="text/css" media="all">
   @import "myCss.css";
</style>

OR

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