How to use Separate Printer Stylesheet In CSS
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.
<!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;">
w3wiki | 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:
How to Create Printer-Friendly Pages with CSS ?
Creating printer-friendly pages with CSS involves modifying the styling of your web pages specifically for printing purposes.
Contact Us