Editing Courses/Design & Technique-Essential Web Design/CSS4print (section)

=How to write CSS Rules only for Print?=
2 options:
* Link a CSS file with  media="print"
* use <code>@media print</code> 
==Link a CSS file with  media="print"==
Add this tag to the HTML file

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

Which loads only the <code>print.css</code> file, when the page is printed.


==@media queries ==
'''@media CSS rules''' or '''media queries''' defines specific contexts, under which specific CSS rules can be used.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
For print:
<source lang="css">
 @media print {
    body {font-size: 12pt;}  
    img { width: 300px;}
 }
</source>

For screen:
<source lang="css">
 @media screen {  
    body {font-size: 14pt;}  
    img { width: 800px;}
 }
</source>

For screens with width smaller than 600px:
<source lang="css">
@media (max-width: 600px) { {  
    body {font-size: 10pt;}  
    img { width: 200px;}
 }
</source>

== @media print ==
You can decide to style very differently you page when it is printed.

You can use it to explore how the way information is displayed influences its message.

== page vs. screen==
* print exists in the space of the page, with fixed page dimensions and breaks 
* a webpage exists in a continuous screen space, often with varying dimensions

== page breaks of the document ==
To control where the pages break, in HTML to print, is tricky, and in part you don't control it.

What you can control is what elements '''must, can or cannot''' break, '''before, after, or inside''' themselves.

In CSS in translates to the rules: 
 page-break-before; page-break-after; page-break-inside 

And values 
 always; auto; avoid;

Example:

<source lang="CSS">

 h1, h2, h3, h4, h5 {
  page-break-after: always;
}

p, table, figure {
  page-break-inside: avoid;
}

</source>

http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks

==More references to HTML-to-print==
http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks