

The CSS page break properties can be placed within your screen or print styles because they only affect printing, but I recommend using them in print CSS for clarity. Simply install the Print Friendly & PDF plugin, activate, and choose settings for full customization. To separate screen and print media, main.css should target the screen only: Īlternatively, print styles can be included within an existing CSS file using rules. The print.css styles will be applied in addition to screen styles when the page is printed. However, I have used separate style sheets for applications with radically different outputs - such as a conference session booking system which displayed a timetable grid on-screen but a chronological schedule on paper.Ī print style sheet can be added to the HTML after the standard style sheet: Personally, I use screen styles as a print base most of the time. The screen and print styles are entirely separate both start from the browser’s default styles. Taking your screen styles as a base, the printer styles override those defaults as necessary. Applied in addition to screen styling.The following sections describe well-supported and practical options for making your pages printer-friendly. However, CSS print control has been possible for many years, and a basic style sheet can be completed within hours. Many developers advocate web accessibility, yet few remember to make the printed web accessible!Ĭonverting responsive, continuous media to paged paper of any size and orientation can be challenging. icons, menus, and advertisements are printed which could never be clicked!.
PDF PRINTER FRIENDLY WINDOWS

reproducing route directions or timetables.“Who prints web pages?” I hear you cry! Relatively few pages will ever be reproduced on paper.

In this article, we review the art of creating printer-friendly web pages with CSS. This article was updated in 2020 to reflect latest best practices in CSS print styling.
