How to use Print-specific CSS In 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).
<!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;">
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>
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