CSS GOING TO PRINT
CSS can be used to specify  how a document is presented   in different media .
We can determine which CSS rules are given to specific devices using the  media attribute :  <link rel=&quot;stylesheet” h...
So, what are possible media types?
There are  ten media types  defined in CSS 2.1
suitable for all devices for speech synthesizers for Braille tactile feedback devices for paged Braille printers for handh...
Can you  specify more than one at the same time?
Yes, you can use  multiple media types  within the one attribute: <link rel=&quot;stylesheet” href=&quot; a. css” type=&qu...
Are there different  methods we  can use?
There are  five methods  that can be used to specify media  for style sheets.
However, some methods are complex, and other can cause issues in some browsers, so we will only look at the  two safest me...
Method 1:  <link> within HTML
You can use a  <link> element  in the head of your HTML document to specify the target media of an external style sheet. <...
Method 2: @media within CSS
You can specify the target medium within a CSS file using  @media @media  screen   { body { color: blue; } }
What is this @media?
At-rules  start with an ' @ ' character followed immediately  by an identifier (such as “media” or “import”).
In CSS2.1 there are  four possible at-rules :  - @charset - @import - @media - @page
We are only going to look at @media now, and focus on  how it can be used to deliver CSS to printers .
@media rules can  sit  anywhere inside  your  external CSS style sheet. body { color: red; } @media  screen   { body { col...
@media rules include the @media statement, followed by a media type,  followed by a start and end bracket . @media screen ...
Any standard CSS rule can be  added inside these brackets . @media screen  { p { color: red; } #nav { float: left; } .intr...
You can specify more than one media type using @media rules. Each media type must be  separated by a comma . @media  scree...
How does @media work?
1. Different devices (such as browsers, printers and mobiles) will see the  <link> element in the HTML file . <link rel=&q...
2. These devices will then  look at the CSS file .
3. The CSS file can included one or more @media rules,  each targeting a different device .  @media  screen  { } @media  p...
4. Each device will  only read the rules assigned to it , based on the media type.  @media screen { } @media print { } @me...
If you want to specify more than one media type inside your CSS file, make sure your <link> element uses a  media type of ...
Otherwise all the other different types of devices will not look inside the CSS file at all.
Why use @media?
The main advantage of @media is that you only need one CSS file, and it can be used to control  all the different media . ...
This means there are less hits to the server, and  only one link in your HTML files , which makes maintenance easier. <lin...
So, let’s talk about print CSS
Trying to set up print CSS can often be  very frustrating  for designers and developers.
There are a wide variety of  different solutions  to deal with: Different operating systems Different browsers Different p...
There are also a range of printing  issues  to deal with: Background images not printing Background colors not printing Pr...
Decision:  Replicate or reduce
The two main  main options  for printing are: Replicate what is on screen Reduce to a print friendly version
Option 1:  Replicating what is on screen
To allow your pages to appear the same in print as on screen, you can  simple adjust the media type .
Add  an additional media type to your @import rule. @media screen,  print  { }
However, you should be aware that  things are never that easy !
Background images and colors  will not print for users as a default. This can make your screen design look odd when printed.
Floats and absolutely  positioned elements can sometimes cut off after the first page (especially in some version of FireF...
Layouts can sometimes cut off look  squashed  when printed.
Although it sounds more complicated, it is often much easier to  deliver a print friendly version .
Option 2: Create new,  simpler rules for printers only
Linking to print CSS Target: Screen and print <link rel=&quot;stylesheet” href=” master.css &quot; type=&quot;text/css”>
Create two @media rules - one  for screen and one for print . @media screen {  /* screen rules here */  } @media print  { ...
Any tips for simple print CSS?
Here are  some pointers  for easy print friendly pages.
Tip 1:  Convert colors to black and white where possible. h1, h2, h3, h4, h5, h6  {  color: #000;  }
Tip 2:  Hide sections of the page that  are unnecessary. #navigation, #sidebar, #adbanner, #richfooter {  display: none;  }
Tip 3:  Convert links to default text color and style - if you want! a:link, a:visited { color: #000; text-decoration: non...
Tip 4:  Avoid floats, absolute positioning and height 100%. #container {  float: none;  }
Tip 5:  Keep it simple! Remember that the goal is to create a page that is easy to print and read.
Russ Weakley Max Design Site:  maxdesign.com.au Twitter:  twitter.com/russmaxdesign Slideshare:  slideshare.net/maxdesign ...
Upcoming SlideShare
Loading in...5
×

Print CSS

4,545

Published on

A quick presentation on setting up your pages for print using CSS.

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,545
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
164
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Print CSS

  1. 1. CSS GOING TO PRINT
  2. 2. CSS can be used to specify how a document is presented in different media .
  3. 3. We can determine which CSS rules are given to specific devices using the media attribute : <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=&quot; sc reen&quot; /> <link rel=&quot;stylesheet” href=&quot; a. css&quot; type=&quot; te xt/css&quot; media=&quot; print &quot; /> <link rel=&quot;stylesheet” href=&quot; a. css&quot; type=&quot; te xt/css&quot; media=” handheld &quot; />
  4. 4. So, what are possible media types?
  5. 5. There are ten media types defined in CSS 2.1
  6. 6. suitable for all devices for speech synthesizers for Braille tactile feedback devices for paged Braille printers for handheld devices for print material for projected presentations for color computer screens for teletypes and terminals for television type devices all aural braille embossed handheld print projection screen tty tv
  7. 7. Can you specify more than one at the same time?
  8. 8. Yes, you can use multiple media types within the one attribute: <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=&quot; sc reen, print&quot; />
  9. 9. Are there different methods we can use?
  10. 10. There are five methods that can be used to specify media for style sheets.
  11. 11. However, some methods are complex, and other can cause issues in some browsers, so we will only look at the two safest methods .
  12. 12. Method 1: <link> within HTML
  13. 13. You can use a <link> element in the head of your HTML document to specify the target media of an external style sheet. <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=&quot;print&quot; />
  14. 14. Method 2: @media within CSS
  15. 15. You can specify the target medium within a CSS file using @media @media screen { body { color: blue; } }
  16. 16. What is this @media?
  17. 17. At-rules start with an ' @ ' character followed immediately by an identifier (such as “media” or “import”).
  18. 18. In CSS2.1 there are four possible at-rules : - @charset - @import - @media - @page
  19. 19. We are only going to look at @media now, and focus on how it can be used to deliver CSS to printers .
  20. 20. @media rules can sit anywhere inside your external CSS style sheet. body { color: red; } @media screen { body { color: blue; } }
  21. 21. @media rules include the @media statement, followed by a media type, followed by a start and end bracket . @media screen { }
  22. 22. Any standard CSS rule can be added inside these brackets . @media screen { p { color: red; } #nav { float: left; } .intro { font-weight: bold; } }
  23. 23. You can specify more than one media type using @media rules. Each media type must be separated by a comma . @media screen, print { p { color: red; } #nav { float: left; } }
  24. 24. How does @media work?
  25. 25. 1. Different devices (such as browsers, printers and mobiles) will see the <link> element in the HTML file . <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”all&quot; />
  26. 26. 2. These devices will then look at the CSS file .
  27. 27. 3. The CSS file can included one or more @media rules, each targeting a different device . @media screen { } @media print { } @media handheld { }
  28. 28. 4. Each device will only read the rules assigned to it , based on the media type. @media screen { } @media print { } @media handheld { }
  29. 29. If you want to specify more than one media type inside your CSS file, make sure your <link> element uses a media type of “all” . <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”screen&quot; /> <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”all&quot; />
  30. 30. Otherwise all the other different types of devices will not look inside the CSS file at all.
  31. 31. Why use @media?
  32. 32. The main advantage of @media is that you only need one CSS file, and it can be used to control all the different media . @media screen { } @media print { } @media handheld { }
  33. 33. This means there are less hits to the server, and only one link in your HTML files , which makes maintenance easier. <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”print&quot; /> <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”all&quot; />
  34. 34. So, let’s talk about print CSS
  35. 35. Trying to set up print CSS can often be very frustrating for designers and developers.
  36. 36. There are a wide variety of different solutions to deal with: Different operating systems Different browsers Different printers Different colour options
  37. 37. There are also a range of printing issues to deal with: Background images not printing Background colors not printing Printing first page only Broken page layouts
  38. 38. Decision: Replicate or reduce
  39. 39. The two main main options for printing are: Replicate what is on screen Reduce to a print friendly version
  40. 40. Option 1: Replicating what is on screen
  41. 41. To allow your pages to appear the same in print as on screen, you can simple adjust the media type .
  42. 42. Add an additional media type to your @import rule. @media screen, print { }
  43. 43. However, you should be aware that things are never that easy !
  44. 44. Background images and colors will not print for users as a default. This can make your screen design look odd when printed.
  45. 45. Floats and absolutely positioned elements can sometimes cut off after the first page (especially in some version of FireFox)
  46. 46. Layouts can sometimes cut off look squashed when printed.
  47. 47. Although it sounds more complicated, it is often much easier to deliver a print friendly version .
  48. 48. Option 2: Create new, simpler rules for printers only
  49. 49. Linking to print CSS Target: Screen and print <link rel=&quot;stylesheet” href=” master.css &quot; type=&quot;text/css”>
  50. 50. Create two @media rules - one for screen and one for print . @media screen { /* screen rules here */ } @media print { /* print rules here */ }
  51. 51. Any tips for simple print CSS?
  52. 52. Here are some pointers for easy print friendly pages.
  53. 53. Tip 1: Convert colors to black and white where possible. h1, h2, h3, h4, h5, h6 { color: #000; }
  54. 54. Tip 2: Hide sections of the page that are unnecessary. #navigation, #sidebar, #adbanner, #richfooter { display: none; }
  55. 55. Tip 3: Convert links to default text color and style - if you want! a:link, a:visited { color: #000; text-decoration: none; }
  56. 56. Tip 4: Avoid floats, absolute positioning and height 100%. #container { float: none; }
  57. 57. Tip 5: Keep it simple! Remember that the goal is to create a page that is easy to print and read.
  58. 58. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×