CODEWITHSUNDEEP
htmlasp.netcss
Gordon Copestake
Gordon Copestake

Reputation: 1647

Change a font during print

I have a table that looks fine on screen, but I would like to change it to a fixed width font when (and only when) it's printed.

e.g.

<table class='style'>
<tr><th>etc</th></tr>
</table>

Then

.style{
        font-family: "Courier New";
        font-size: 10pt;
    }

How can I get it so the css class tag only affects the print style. I only have one style sheet so can't have a separate @media print sheet.

Upvotes: 0

Views: 4612

Answers (3)

mohkhan
mohkhan

Reputation: 12315

You can have both styles mentioned in one CSS file itself. Like this

@media screen
{
    .style{
        font-family: "Courier New";
        font-size: 10pt;
    }
}

@media print
{
   .style{
       font-family: "Helvetica";
       font-size: 12pt;
   }
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

You already answered your own question, if you don't need a separate print stylesheet, you need to re declare the print block

@media print {
  element.class {
     font-family: "Courier New";
     font-size: 10pt;
  }
  /* You can add additional styles here which you need */
}

/* The styles between @print braces will be applied when you print the document */

Note: Selectors which you use inside the @print block will be taken into consideration when a user is printing the document, rest of the rules which are not declared will be picked up from your normal styles

Upvotes: 1

MassivePenguin
MassivePenguin

Reputation: 3711

Have you tried adding a print media query to your stylesheet, and inserting the new style rules in that?

@media print {
    .style{
        font-family: "Courier New";
        font-size: 10pt;
    }
}

Upvotes: 1

Related Questions