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