HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>print() — media query</title>
  <style>
    @media print {
      .no-print { display: none !important; }
      body { font-size: 12pt; }
    }
  </style>
</head>
<body>
  <header class="no-print">Site header (hidden when printing)</header>
  <main>
    <h1>Article title</h1>
    <p>This content appears in print preview.</p>
  </main>
  <button type="button" class="no-print" id="printBtn">Print</button>
  <script>
    document.getElementById("printBtn").onclick = function () {
      window.print();
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript print() — @media print (Try It)