CODEWITHSUNDEEP
cssprintinghtml
newguy
newguy

Reputation: 5986

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

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.

Upvotes: 17

Views: 55686

Answers (3)

Dan
Dan

Reputation: 133

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

Upvotes: 4

ankitjaininfo
ankitjaininfo

Reputation: 12372

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

Upvotes: 3

Daniel O&#39;Hara
Daniel O&#39;Hara

Reputation: 13438

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

Upvotes: 17

Related Questions