cssprint-css

External print.css file - How to make element visible on print only, not visible on screen?


I am currently using the following as my external print.css file:

/* Remove unwanted elements */

hiddenedit, #hiddenbuttons, #header, #nav, .propertyselector, li.hiddentab, ul.hiddentab { display: none; }

/* Ensure the content spans the full width */

container, #container2, #content { width: 100%; margin: 0; float: none; }

/* Change text colour to black (useful for light text on a dark background) */ .lighttext { color: #000 }

/* Improve colour contrast of links #781351 */ a:link, a:visited { color: #000 }

I understand how this works to make display: none for the items that I do not want to print on the page. My question is: How can I do the reverse of this? What would I do if there are elements on the page that I only want to be visible when the page prints, not visible when the page is viewed?

Any ideas? Thank you.


Solution

  • Simply put

    .onlyprint {display: none;}
    @media print {
      .onlyprint {display: block;}
    }
    

    into your CSS rules.