Styling for Print

You can use a specific style sheet to style content for print.You know the differences between length units used for a computer screen and length units used for print. This is one of the key reasons that separate style sheets for print exist. Specifying measurements designated for computer screens, such as pixel units, can potentially be inconsistent in printed documents, whereas real-world, absolute length units, such as inches, centimeters, points, and so on are ideally suited for print.

A style sheet written explicitly for print enables developers to exclude irrelevant portions of a web document from the printed version. For example, no document navigation is required in a printed version. Additionally, because color documents have some expense associated with them, depending on the type of printer and what type of ink or toner the printer uses, it is also often better to exclude background images or other aspects of the design that result in greater consumption of expensive ink or toner. For these reasons, print versions of web documents are often simplified to simple black and white productions of the original document. Only foreground images relevant to the document are retained. In fact browsers, by default, strip out all background images and color; to print these, the user must specifically enable them before printing.

CSS 2 provides several properties for controlling the presentation of paged media, although at the time of this writing a sparse selection of those properties is actually implemented in current browsers. CSS 2 properties control such things as where page breaks occur, the size of the page margins, and the size of the page itself. In this area, Opera boasts the best support for the CSS 2 paged media properties; I focus on only the features that have the best support.

Applying Styles Based on Media

In order to print in CSS, you need a way of differentiating styles intended for print from styles intended for the computer screen. CSS can apply to a variety of documents, not just (X)HTML, and CSS can be used on a variety of different devices and media.

To target different media, you use the media attribute, which is applied to the <link /> element, or the <style> element. Or, from within a style sheet, you can target different media using @media rules. You see examples of these later in this section. First, let’s examine the different types of media that CSS can theoretically be applied to. The different types of media are outlined in the following table.

PC and Mac browsers recognize only screen, print, and all values.

As you can see in the preceding table, CSS can target a wide variety of media types. For the purposes of the discussion, you need only be concerned with the screen, print, and all media. Each medium can be supplied as a value to the media attribute. For example, if you wanted a style sheet to apply only to styles presented in a PC or Mac browser, you would add the attribute media=”screen” to either the <link /> or <style> elements. A demonstration appears in

p{
width:200px;
height: 200px;
padding: 10px
margin: 10px;
font: 12px sans-serif;
}

In above example you see that some basic styles have been applied to the <p> element, nothing fancy, or really of particular interest.

In below you see one new addition, the media=’screen’ attribute, is applied to the <link /> element, which tells the browser that the styles are intended for onscreen display only. In 3rd you don’t notice anything extraordinary; you see a <p> element with the styles applied as you would expect. The effects of the addition of the media=’screen’ attribute become noticeable when you go to print the document. 4th shows what the print preview looks like.

In 4th image, you see what’s happened here – since the styles only apply to onscreen display, they aren’t applied to the print version of the document. If you would have included media=’all’, the styles would be present in the printed version. Or, you could create a style sheet that applies to print exclusively, by using the media=’print’ attribute. In the next section I discuss the @media rule, which allows you to make medium-based distinctions from within the style sheet.

Related posts:

1. Using Stylesheets You can place styles in three locations: stylesheets, <style>, and...
2. Styling text using CSS HTML is intended as a structural markup language, but the...
3. Adding styles to a web page The most common (and useful) method of applying CSS rules...
4. Using Cascade Order CSS allows you to assign the same rule to the...

Related posts brought to you by Yet Another Related Posts Plugin.