Results 1 to 7 of 7
Thread: Printer-Friendly Sites with CSS
Threaded View
-
01-17-2004, 05:55 PM #1Web Developer
- Join Date
- Feb 2003
- Location
- Connecticut
- Posts
- 5,460
Printer-Friendly Sites with CSS
Many sites need to use PHP and seperate templates for printer-friendly layouts. Loads of colors can often waste printer ink, and deter people from printing important content. CSS helps solve this issue without the user ever having to click an extra button.
There's two ways you can utilize printer-friendly CSS. Firstly, you can link to an off-page document by placing the following code in your <head></head>.
Code:<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
Code:@media print { CSS HERE }
Code:* /* this selector applied to ALL elements */ { background-color: #fff ! important; /* here, we remove the background color. the ! important makes it so that no other settings can over-ride it. */ border-color: #000 ! important; /* next we make sure all borders are solid black. */ color: #000 ! important; /* now, we make all text solid black, too. */ } img /* this applies to all images */ { display: none ! important; /* this forces all images to be transparent. remove the ! important if you know CSS and want to make sure some images remain. */ } .invis { /* Add class="invis" to any element in your HTML that you don't want to print, such as a navigational element. */ display: none; }
If anything is unclear, feel free to post and I'll try to reword/add to it.Last edited by Akash; 01-21-2004 at 09:27 PM.