Menu
Trying to learn about how to effectively use print.css, so that graphical and navigational elements are not shown in print preview/print. Read some articles, and part of print css of html5 boilerplate. Two sites, which was quite impressive the way they change the look during print are
http://css-tricks.com/
http://bottlerocketcreative.com/
But I cannot see the css related to print. Can you please point to the css they use to learn how to do similar transformation.
863
You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters. This rule allows you to specify different style for different media.
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
A print stylesheet formats a web page so that, when printed, it automatically prints in a user-friendly format. Here's what you need to know. Print stylesheets have been around for a number of years and have been written about extensively.
Use high contrast between your background and text. For maximum readability, using black text on a white background works best. Adjust font sizing improve readability. Text that might be easy to read on a computer screen is sometimes too small or too large when you're reading it from a printed page.
I have had a look at the sites you linked to and they do not appear to have any print styles associated with them. I believe they are using the browsers default print settings. So one of the big changes is background images being hidden default. For CSS-Tricks, the reason it might look so different is because it uses media queries. So if you narrow your browser to 800px or less, you will see that the list of posts expand to the full width of the browser as they do when the document is printed.
However in general, print styles are either set using a media tag in your existing stylesheet:
@media print{
/*styles here*/
}
or linking to a stylesheet specifically for print purposes:
<!--These styles styles are only for screens as set by the media value-->
<link rel="stylesheet" href="css/main.css" media="screen">
<!--These styles styles are only for print as set by the media value-->
<link rel="stylesheet" href="css/print.css" media="print">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
