Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS document for printing

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 552
    Comment on it

    Hello everyone,

    Lots of web pages have a print-friendly version and many of them don't. I realize that there's no need because you can set up a second CSS document to be called up when a user prints the page.

    So, basically we need two css in the header section.

    <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
    <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
    

    The first line of the code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

    So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads:

    <link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" />.
    

    Now just keep entering CSS commands until the display on the screen matches and how you want the printed version to look. You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: