Hey yall I normally see <link rel="stylesheet" type="text/css" href="print.css" media="print" /> or <link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> Can someone tell what the print css file does? How do I build one or know the steps in building a print.css? Many thanks in advance. CHEERS
http://www.alistapart.com/stories/goingtoprint/ Basically, print is usually about content (as far as when people are printing from a web page). They want to read it later, read on paper, keep a paper copy of those small-print conditions, keep their receipt, keep a copy of that thing they wanted to buy from the catalog, fill it out and mail it in... 99% of the time. So, make a print.css, which basically makes it printer friendly. White background, black text (esp if you have a light-on-dark design... printers don't have white ink!). Remove floats and sidebars, and navigation. Use appropriate fonts. This usually means serif (though it doesn't have to be). Try pt sized fonts-- after all, they were made for print. Remove decorational images. They were already in your CSS, weren't they? They should have been. Set margins and padding in measureable units like mm and inches. If your page is not 800px wide, set it to such. Most printers can shrink a flex-width page just fine but why take the chance that it'll think it needs Landscape for this one? Sometimes though having a brochure as a PDF is the better solution, depending on what you want to be printable.
Thanks Stomme Man!! I read your reply but still don't get it lol. This might take me a while to actually figure this one out. I just thought the print.css was the same as the screen.css file but with a different name lol.
Then you must not care about users printing your webpage out. Basically a print CSS file is called when the users prints your webpage, and all it does is allow you to gray-scale everything and make it printer friendly. It's not required, but it is nice to give your users that option (considering that if you tried to print out a normal website without a print CSS, you would waste half your ink cartridges). I've found that it's almost better to not use the media="print" but rather create a separate file that uses the print's CSS and put a link on each page saying "Print Page" or "Print Document", this lets users know that they can print your webpage without blowing 150 bucks in ink. The reason I say this is now-a-days users have figured out that you don't print websites, and not to click the Print button. They don't know how to view your source, and if they did, they wouldn't know what to look for to find out if your site is printer friendly, so tell them with a "Print this Page" link.
Try doing a print preview of your site or any site. Whatever you see there is styled using the print stylesheet. If there's no print stylesheet, then it would just display it as it is (usually with backgrounds disabled). Try and compare sites that have print stylesheets with those that doesn't.
I am in the process of redoing a form... while the other pages and the other forms are included in the print.css, there is one form (which is also available as a PDF, but not everyone has a document viewer app) which needs to be rewritten for print. This is because I have select-drop-downs everywhere, as they were easiest for the php/perl guy to code, but those don't work real well on paper : ) I've changed all those to checkboxes. And since it was for print only, with its own CSS, I removed all the accessibility stuff-- no for="" in labels, no names and id's on inputs, nothing. It's a pure-HTML printable page for those who'd like to write on paper and mail it in (a surprisingly large population, don't underestimate it!). So, the regular form page is the only one with a printer icon going to the "print" version. This is the only page on this site without a seperate print.css... in fact, I'm leaving it as an internal CSS, although I notice this makes my Tredosoft IE5.5 puke... I don't think internal CSS styles make the real IE5.5 puke though does it? If you read the link I sent you, you'd see the reasons to make print.css different, and also how to set it in your CSS (well, they use the @import thing... bah! ) I use this: <link rel="stylesheet" type="text/css" href="scooter.css" media="screen, projection" > <link rel="stylesheet" type="text/css" href="scooterprint.css" media="print"> If your "standard" sheet is media="all" like basically at AListApart then you are starting with your "standard" css sheet for print, and your print sheet will undo everything, such as, if something's floated, you'll need: #element { float: none; } etc So I like to start off fresh, with print not inheriting anything from screen/projection.
Ok I will give this one a try. Thanks Stomme I understand some of it what your saying now. I guess the more times I read, then the more I understand it .
My print media versions of sites usually are VERY different layouts. I strip out borders, headers and colors on most everything to black and white. A good way to design your 'test' template for print is to set the body to a black background with 0.5in padding. Then make a extra container around your template that's set to 8.5in wide and centered, then throw in some absolute positioned div's 1px tall inside that every 11" to show you where the page breaks may lie. This lets you get your 'rapid' bits of layout done. Even with that 'framework' around your design (which you'd remove before deployment) you'll likely still need to test it. Most of the time browser print previews SUCK, so your best bet is to print tests to PDF.
Yeah I've noticed that with one of my forms, I can only check the print preview for IE7 on the Windows machine (not hooked up to a printer so the other browsers just say No), that I often have an input at the bottom of one page and the label at the top of the following page. I sure as hell don't want that, and also some inputs don't see to be showing at all... and I'm HOPING this is just IE showing it wrong... but we're about to go set it online so that we can print it, but more importantly that a friend of the boss's has a Mac and we really need to see what Safari and FF-4-Mac does! Because it's showing the goofiest of all on print preview!