Display a div in print only, not on screen

How can specify a div on a webpage to not be visible on the screen, but when printed I want the div to print?

I am currently using a print.css file to turn off certain elements, but what I want to do now is the reverse of that.

 Thanks,
DanielAttardAsked:
Who is Participating?
 
Jesse MatlockConnect With a Mentor UX EngineerCommented:
My apologies ;) That's what I get for reading while my wife is talking to me.. :D
You can continue to use the separate print.css file and do what COBOLdinosaur recommended.

Or you could eliminate the loading of the print.css all together and use something like this within your main.css:

@media print {
    /* styles for print go here */
    div#to_hide {display:block}
}
@media screen {
    /* styles for screen go here */
    div#to_hide {display:none}
}

Open in new window


Again, my apologies for misreading the question.;)
0
 
COBOLdinosaurConnect With a Mentor Commented:
in the screen CSS give the element a display attribute:

#myelement {display:none}
and in the print css:
#myelement {display:block}
0
 
Jesse MatlockUX EngineerCommented:
And even more clean approach, instead of loading another style sheet, is to simply add something like this to your current CSS:

@media print {
  /* styles for print go here */
div#to_hide {display:none !important}
}

Open in new window

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
COBOLdinosaurCommented:
@cloud9manager,

You are correct, but I believe they have indicated they are already using a separate print stylesheet.
0
 
DanielAttardAuthor Commented:
Thanks for pointing me in the right direction.  Both of your solutions works, but in the end I decided to use this solution and dispense with the loading of the print.css file and instead I put it all in the main css.  I was not familiar with @media print and @media screen until now.

Great stuff.
0
 
Jesse MatlockUX EngineerCommented:
Excellent.. glad that works well for you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.