How can i apply CSS to print?

javascript jquery css printing media

20,045

Solution 1

Use the following:

<style type="text/css">
    @media print
    {
        body {
            /* styles */
        }
    }
</style>

Solution 2

There is many ways for that:

First: <style type="text/css"media="print">

Second: <style type="text/css"media="screen">

Third:

@media print 
 {
 body { margin: 0; background-image: none; font-size: 12pt; }
 }

Hope this is Helpful for you..

Solution 3

What you're doing in your original message will work fine. It's just the old school way of doing things.

One thing to note is that the browser will not apply all of your styles in the print mode. It picks and chooses which styles are print appropriate. I have also found that if you use a HTML 5 doctype it will give you slightly different results.

Here's a simple example similar to yours that you can try in the browser.

<!DOCTYPE html>
<html>
<head>
<style media="print">
.hideForPrint { display:none; }
.anotherSTyle { font-family: Verdana; text-decoration:underline; }
</style>
</head>
<body>
<div class="hideForPrint">Print This?</div>
<div class="anotherStyle">Another Style</div>
</body>
</html>

Here's a screenshot from the print preview of Chrome (v19.0.1077.3 canary), which you mentioned your using to test this.

enter image description here

20,045

Author by

Mert Karatas

Updated on March 24, 2020

Comments

Mert Karatas about 4 years
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?
```
   <style type="text/css" media="print">
body
{
font-size:medium;
color:Black;
font-size:14px;
}
input 
{
margin:0px;
font-size:14px;


}
.grid
{
border-color:Gray;
border-width:1px;

}
.alan
{
border-style:none;

}

.grid1
{
border-color:Gray;
border-width:1px;
}
    </style>
```
- jbabey about 12 years
  
  media print CSS
- Antonix about 12 years
  
  try this construction: <style type="text/css"> @media print body {...} ... </style>
- Jignesh Rajput about 12 years
  
  check this : stackoverflow.com/questions/9724163/…
- metalfight - user868766 about 12 years
  
  @import url(somefile.css) print; try this
Mert Karatas about 12 years

It still remains same with no css at print page.
Nahydrin about 12 years

What browser are you using? Also there is no guarantee that Print Preview will style the document; because it is at the discretion of the preview program, so actually try printing a page.
Mert Karatas about 12 years

I am using Chrome and i tried to actually printing. But still css is not applied.