htmlfreecodes.
Menu

A good first building block

Print a page

A user-activated print button and a clean print stylesheet for an article.

HTMLCSSJavaScriptNo dependencies
Edit in playground

Live preview

Explore the result below

HTML

<main><h1>A small reading list</h1><p>Three building blocks for a useful web page:</p><ol><li>HTML gives content a structure.</li><li>CSS makes that structure easy to read.</li><li>JavaScript adds deliberate interactions.</li></ol><button id="print" type="button">Print this page</button><p class="screen-only">Choose the button to open your browser's print dialog. Nothing is printed automatically.</p></main>
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}button:disabled{opacity:.5;cursor:default}li{line-height:1.7}@media print{body{display:block;background:white;padding:0}main{width:100%;padding:0;border-radius:0}button,.screen-only{display:none}h1{font-size:20pt}p,li{font-size:12pt;color:black}}
</style>
</head>
<body>
<main><h1>A small reading list</h1><p>Three building blocks for a useful web page:</p><ol><li>HTML gives content a structure.</li><li>CSS makes that structure easy to read.</li><li>JavaScript adds deliberate interactions.</li></ol><button id="print" type="button">Print this page</button><p class="screen-only">Choose the button to open your browser's print dialog. Nothing is printed automatically.</p></main>
<script>
document.querySelector("#print").addEventListener("click",()=>window.print());
</script>
</body>
</html>

A little guide to making it yours

  1. Copy the code and save it in a file named example.html.
  2. Open the file in your browser to see the complete example.
  3. Change the text and structure in the HTML.
  4. Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

The click handler requests the browser print dialog after user activation. Print media rules remove controls and backgrounds. The playground restricts modal dialogs, so copy the complete document and open the file to test printing. A normal print-enabled preview is provided on this example page.

Historical purpose: The stage-one 2014 archive recovery verified this exact detail purpose. This is an original modern implementation; no archived third-party code, credit link, remote script or guessed numeric preview mapping is reused.

Troubleshooting and limits

The editor preview cannot open print dialogs. Save the complete file, open it in a browser, then choose Print this page. The print stylesheet hides controls. Printer, paper and browser margins can differ; check print preview before printing.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going