How to Create Printer-Friendly Pages with CSS ?
Last Updated :
12 Apr, 2024
Creating printer-friendly pages with CSS involves modifying the styling of your web pages specifically for printing purposes.
Importance of printer-friendly pages
- Printer-friendly pages ensure that information is accessible to a wider audience including those who may rely on printed materials.
- Printer-friendly version of a webpage allows you to easily print out content for reference, sharing, or offline reading.
- These pages help to make a receipt of the online payments and print out them in a well format.
- They remove unnecessary elements such as advertisements, navigation bars, or background images and focus on the main content.
The below approaches can be used to create printer-friendly pages.
Using Separate Printer Stylesheet
In this approach, we can separately create an CSS stylesheet specifically for printing. This stylesheet should hide or modify elements that are unnecessary or irrelevant when printed, such as navigation menus, advertisements, or background images.
Syntax:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Example: The below example demonstrate the use of Separate Printer Stylesheet.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="print.css" media="print">
<title>
Print-friendly Page Example
</title>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks | Print-friendly Page Example
</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
<button onclick="openPrintPage()">
Print
</button>
<script>
function openPrintPage() {
window.print()
}
</script>
</body>
</html>
/* print.css */
/* Add border around the whole page */
body {
border: 1px solid #000;
padding: 20px;
}
/* Ensure table is centered when printed */
table {
margin: 0 auto;
}
Output:
Using Print-specific CSS
In this approach, we are going to use a @media print at-rule, which defines a different styles for web pages when printed on paper or as a PDF, instead of what displayed on screen. The print media type sets the styles for printed media that is only used for printed content.
Syntax:
@media print {
/* Add the print specific styles */
}Example: The below example demonstrate the use of @media print (Using Print-specific CSS).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Print-friendly Page Example
</title>
<style>
@media print {
/* Add border around the whole page */
body {
border: 1px solid #000;
padding: 20px;
}
/* Ensure table is centered when printed */
table {
margin: 0 auto;
}
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks | Print-friendly Page Example
</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
<button onclick="openPrintPage()">
Print
</button>
<script>
function openPrintPage() {
window.print()
}
</script>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...