How to define different styles for printing a web page on the printer. We show you a couple of different techniques, applying CSS styles in separate files or using @media.
sometimes we need that our page is printed on a printer differently as displayed on the website. For example, if a page shows a report with data that you want to save printed on paper, you probably want the printer to display it in a smaller font, so that you can condense all the content to fit on one sheet of paper. . It is also possible that in reports we want the company logo to appear centered in the header of the report, while that company logo on the screen appears in the header with the navigation bar.
Any changes that you need to apply to the style of a page when printing the document can also be applied using the CSS language. In short, Cascading Style Sheets are used to define the appearance of the page, and these styles can be declared differently when printing an HTML document and when viewing it in the browser.
How to link to a CSS stylesheet that only affects printing
As we already know, in CSS you can define styles in an external document, like this:
With this we assume that we have a file called styles.css, which is in the same directory as the page, where the document styles are defined.
Similarly, we can assign an external style sheet to define the appearance when a user prints the web page:
The only thing that changes is the media=”print” attribute, which indicates that this style sheet is only for when the web is going to be printed.
Example of two different css sheets for printing and display
Now let’s look at an example of a web page that has two different style sheetsone for when you are in the browser and another when you are going to print.
We have an HTML that includes two style sheets and has several layers, which we will later layout or position with CSS.
As you can see in the previous HTML, two CSS files with styles have been included. The first is style.css, which is the style that will be used when displaying the page in the browser. The second link to a CSS style sheet is print_style.css, which will define the appearance of the page when printed (note the media=”print” attribute of the tag).
The CSS codes are very similar, we’ve just made a couple of changes to illustrate what we’ve been saying. The layer with id=”logo” will not be shown in the page view. For its part, when printing the page, the navigation bar on the left will not be displayed and the central contents will be displayed in the full width of the print space. The id=”header” layer will also not be displayed.
The browser display CSS code
BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ffffff; } #container{ text-align: left; width: 770px; margin: self; } #header{ background-color: #d0d0ff; colour: #333300; font-size:12pt; font-weight: bold; padding: 3 3 3 10px; } #logo{ visibility:hidden; display: none; } #body{ margin: 10 0 10 0px; } #side{ width: 160px; background-color: #d0d0ff; float:left; } #lateral ul{ margin : 0 0 0 0px; padding: 0 0 0 0px; list-style: none; } #lateral li{ background-color: #ffffff; margin: 2 2 2 2px; padding: 2 2 2 2px; font-weight: bold; } #aside{ color: #3333cc; text-decoration: none; } #pie{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; clear: both; } #main{ background-color: #ffffff; padding: 0 0 0 20px; width: 580px; float: left; } #principaltable{ background-color: #ffffff; width: 580px; border: 2px solid #cccccc; font-size:10pt; }
The CSS code to be used for printing the page
BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ffffff; } #container{ text-align: left; width: 600px; margin: self; } #header{ visibility:hidden; display: none; } #logo{ visibility:visible; display: block; margin-left: 20px; } #body{ margin: 10 0 10 0px; } #lateral{ visibility:hidden; display: none; } #pie{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; clear: both; } #main{ background-color: #ffffff; padding: 0 0 0 20px; width: 600px; float: left; } #principaltable{ background-color: #ffffff; width: 600px; border: 2px solid #cccccc; font-size:10pt; }
If we want to see how the page would be printed, but without using the printer (to save paper or ink or if we don’t have a printer), we can access the File – Preview menu of our browser. We can also print to a PDF and then open that PDF.
Different styles for printing with @media
The above technique can be useful for keeping print styles and general styles separate. However, if you wish, you can also maintain a single style sheet in which you occasionally have some CSS modifications that would only be applied when printing the document.
For this we can use the one that we have already talked about previously. Thus we could define a set of style rules that would only affect printing:
@media print { body { font-size: 11pt; background-color: #fff; } table { border: none; } }
It’s up to you how to organize your CSS, whether in separate files or whether you prefer it all together in the same file, using @media when you need to specify styles for a specific medium.
Conclusion on CSS styles for printing
We have been able to learn two job variants to use specific styles for printing. We hope this printable css workshop has been useful.
To finish we offer you a couple of links. The first is a workshop in which . The second is how to define .
Facebook Comments
Disqus