This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.
When a web page is printed without it's own print style sheet it comes out pretty much as it appears on the screen. Fine, but would that be the most appropriate appearance for the content that it is being printed, and then presumably read from that printed page? If you think about it, no is the correct answer. Take a look at some of the aspects of the appearance of the page on-screen and you'll see what I mean.
The most basic thing is the font and its size. Think about the font itself. This has been set to
because sans-serif fonts are the best fonts to use for ease of on-screen reading. Verdana was actually created specifically for this purpose. If your main contact with design has been creating content to be read on-screen, you probably use Verdana or another sans-serif font for all body text purposes. But if you use it for materials that are going to be printed out, even on a quite low resolution printer, let alone a laser printer, you are dead wrong. Those who in fact come from a "real world" design background will almost certainly know that serif fonts are the correct choice for body text on a printed page.
Why the difference? It's a good question that I can't resist answering. Serif fonts work best on paper because the serifs on the letters help tie all the letters in a word together and create the recognizable word entities (as opposed to a group of individual letters) that we use when we are reading. Sans-serif fonts don't have this legibility aid. So why then don't we use serif fonts on-screen? The answer lies in resolution. Pages will be printed, at the barest minimum of 150 dpi, and more likely 300 dpi on a laser printer. Screens on the other hand are struggling to get to 96 dpi, and the most you can rely on is 72 dpi. This simply isn't enough to recreate the subtlety of serif fonts with any accuracy. Instead, the approximation it gives is somewhat messy and more difficult to read. The advantage of the serif is far outweighed by its disadvantage in this context.
So, if we were planning to have our page printed, for maximum legibility we would specify a collection of serif fonts, maybe something like
The size of the font would be different as well. We don't
generally speak about ems when we are talking about printing
something - instead we talk about points. If we were going to
print our page we would probably specify a
font-size of perhaps 12 or 14pt.
Another convention that differs between printed and on-screen materials is justification of the text. Generally in printed matter it is better to have text which is fully justified, rather than the left justified, "ragged right" text we usually see on-screen. We could change that as well.
Color and (less so) images are "cheap" on-screen. It doesn't cost more money to have an attractively colored background on your page as we've done here, and the images we have included are small, so cost relatively little in terms of download time. Color on paper is a different story. Color costs money to print, and the more color you have the more money it costs. We'll like it easier for people to print our pages if we remove the images and the decorative background.
And we might like to change the layout of the page, making it simpler and allowing a lot more text to fit on the page than it does at the moment. As well we'll probably want to change some of the style for the various heading levels and get rid of a lot of of the use of color.
The cascading cascading part of cascading style sheets becomes important in a print stylesheet. All the properties specified in your default stylesheet will cascade into print stylesheet (even when it is being printed) provided nothing in print stylesheet changes or cancels their effect. If you want a property to be the same in both the on-screen version and the printed version of the page, you don't have to worry about it at all in print stylesheet. If you don't do anything to override it, it will continue to have the same effect. But if you want a difference style in your style sheet be sure to consider the cascade. Declaring properties explicitly works much of the time.
To get rid of the images in the printed version of a
document use the display property. The
display property is a relatively advanced property
which allows you to change how an element is displayed in the
browser. The values include,
noneblockinlinelist-itemThe display property is probably best explained
by looking at some of the values it can take along with some
elements that inherently have that value.
display: block means that an element will
separate out from the flow of its surrounding elements. A
<p> element is an obvious example of a
block element.display: inline on the other hand means that
an element does not separate out from its adjacent elements,
but rather follows on directly. <a>
elements are an example of inline elements that best
demonstrate their nature. When you create a link inside a
paragraph, this doesn't cause the text of the link to
separate out from the paragraph that contains it, does
it?display: list-item elements, like block
elements, separate out from surrounding text. In addition, a
marker is added to the left of the element, and the element
will be slightly indented from its parent element. The
obvious example of an element with a display:
list-item is the <li> element. Note
that the other list-related elements, <ul>
and <ol> are in fact simply block
elements.Display: none means that an element does not
appear at all on the page, nor does it affect the position of
any other elements on the page - as if it wasn't there in the
code at all. No HTML elements have an inherent display type
of none.In CSS there are a number of properties you can use which will have their specific effect when your page is printed. If you've done any work in desktop publishing you'll be aware that it's vital to have control over where a page will and will not break, for example, when it is being printed. While these properties are not universally supported in all browsers, they cause no harm in browsers that don't support them, so you may as well use them particularly if you have an eye to the future.
The two most simple to understand, and widely supported page-breaking properties are:
page-break-beforepage-break-afterThese two can both take a number of quite sophisticated values, but those you'll be most interested in initially are:
always - where the page will always break
hereavoid - where the page will avoid breaking
here if this is at all possibleAgain, if you've worked in desktop publishing you'll see how these properties and values are analogous to properties you set up in styles. For instance you could use:
The :after pseudo-element may be useful in a print stylesheet for generating content of a URI, abbreviation or acronym. For instance you could use:
I might go about creating a print a stylesheet by writing something like:
...and so on, making changes and previewing them in my browser. Once I had the stylesheet tweaked to my satisfaction, then I'd make one simple change:
In the meantime, while styling for print, I'd want to make sure I didn't have the actual screen-media styles interfering. So let's say that I had a screen-media stylesheet in the document. Before I started work on my print styles, I'd edit it to only apply to a medium like tty or aural-- something I knew my browser didn't support. Then, once I'd switched my print styles to actually have media-"print", I'd switch the tty value back to screen.
Remember this, the default value of media is all. So if you don't give a stylesheet a media value, it will be applied to your printouts as well as the screen display.
©
1998-2024
Laura
L.
CarlsonThe views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.