1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Rep Power

    CSS - page to print with additional text which isn't on screen


    What I want to do is have certain text which is in my html file to only be viewed when the page has been printed and not on screen.

    I've got layout.css for the screen layout and print.css for the print layout.

    The layout.css looks like this:

    #printfooter {display: none;}
    .printtext {display: none;}

    and the print.css looks like this:
    #printfooter {margin: 1.3em 0.9em 1.5em 1em; }
    .printtext {font : 10pt verdana, arial, helvetica, sans-serif; text-align: right; color : black; }

    The HTML file is coded like this:

    <div id="printfooter" class="printtext">blah blah blah blah blah</div>

    I figured that if I could not print parts of the HTML file by using {display: none;}, then I could not view parts of the file by using the same thing in the layout.css.

    It works in that it's not viewed on screen, however it won't print out either.

    Is this something that can actually be done?

  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Inside the GNU/Hurd kernel
    Rep Power
    It's very simple,just specify the media type for the stylesheet file:
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
    The CSS specification can be found here:

    Anyways,have you ever heard of the search function?;Simple Print Question - Urgent

IMN logo majestic logo threadwatch logo seochat tools logo