Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Set page size, margins, and orientation
Create headers and footers for printed pages
Control page breaks and numbering
Different styles for first page, left/right pages
Essential for professional documents
Works with @media print
@page rule lets you style the printed page itself, not just the content on it!Set paper size and margins
@page { size: A4; margin: 2cm; }Portrait or landscape
@page { size: A4 landscape; }Style :first, :left, :right pages
@page :first { margin-top: 5cm; }Add page numbers and titles
@top-center { content: 'Report'; }/* Basic page setup for printing */
@page {
size: A4; /* Paper size */
margin: 2cm; /* All margins */
margin-top: 3cm; /* Extra top margin */
}
/* Use with print media query */
@media print {
@page {
size: A4 portrait;
margin: 2.5cm;
}
body {
font-size: 12pt;
}
}/* Standard paper sizes */
@page {
size: A4; /* 210mm × 297mm */
}
@page {
size: letter; /* 8.5in × 11in (US) */
}
@page {
size: legal; /* 8.5in × 14in (US) */
}
/* Custom size */
@page {
size: 8in 10in; /* Width × Height */
}
/* Orientation */
@page {
size: A4 landscape; /* Horizontal */
}
@page {
size: A4 portrait; /* Vertical (default) */
}/* All sides the same */
@page {
margin: 2cm;
}
/* Top/Bottom and Left/Right */
@page {
margin: 3cm 2cm; /* top/bottom left/right */
}
/* Each side individually */
@page {
margin-top: 3cm;
margin-right: 2cm;
margin-bottom: 2cm;
margin-left: 2.5cm;
}
/* Short form: top right bottom left */
@page {
margin: 3cm 2cm 2cm 2.5cm;
}cm (centimeters), mm (millimeters), or in (inches). These are more accurate for paper than pixels!/* First page (like a cover page) */
@page :first {
margin-top: 5cm; /* Extra top margin */
margin-bottom: 2cm;
}
/* Left pages (even pages in a book) */
@page :left {
margin-left: 3cm; /* Binding side */
margin-right: 2cm;
}
/* Right pages (odd pages in a book) */
@page :right {
margin-left: 2cm;
margin-right: 3cm; /* Binding side */
}
/* Blank pages */
@page :blank {
/* No headers/footers on blank pages */
}/* Define named page styles */
@page chapter-start {
margin-top: 8cm; /* Extra space for chapter title */
}
@page appendix {
size: A4 landscape; /* Different orientation */
}
/* Use named pages in your HTML */
.chapter {
page: chapter-start; /* Apply this page style */
page-break-before: always;
}
.appendix-section {
page: appendix;
page-break-before: always;
}<div class="document">
<div class="cover-page">
<h1>Annual Report 2024</h1>
<p class="subtitle">Company Performance Overview</p>
<p class="date">December 2024</p>
</div>
<div class="content-page">
<h2>Executive Summary</h2>
<p>This report provides a comprehensive overview of company performance
for the fiscal year 2024. Key highlights include revenue growth,
market expansion, and strategic initiatives.</p>
<h3>Financial Performance</h3>
<p>Revenue increased by 25% compared to the previous year,
reaching $10 million in total sales.</p>
<h3>Market Position</h3>
<p>We expanded into three new markets and acquired 1,000 new customers.</p>
</div>
<div class="content-page">
<h2>Future Outlook</h2>
<p>Looking ahead to 2025, we anticipate continued growth and
expansion into international markets.</p>
</div>
</div>Loading preview...
<article class="book">
<section class="chapter">
<h1>Chapter 1: Getting Started</h1>
<p>This is the first chapter of our book. Notice how the margins
are different on left and right pages, just like in a real book
where you need space for binding.</p>
<p>The left pages have more margin on the left side (binding side),
and right pages have more margin on the right side (binding side).</p>
</section>
<section class="chapter">
<h1>Chapter 2: Advanced Topics</h1>
<p>This chapter continues on the next pages with proper margins
for book binding.</p>
<p>Professional books use this technique to ensure text doesn't
get lost in the binding area.</p>
</section>
</article>Loading preview...
Professional documents with consistent margins
Different margins for left/right pages
Custom page sizes and orientations
Standardized formatting and margins
@page :first for cover pages with extra spacingpage-break-after: avoid on headingsA4 - 210mm × 297mm (most common)A5 - 148mm × 210mm (half A4)A3 - 297mm × 420mm (double A4)letter - 8.5in × 11inlegal - 8.5in × 14inledger - 11in × 17in5in × 8in - Small book6in × 9in - Standard book8.5in × 11in - Textbook2cm - 2.5cm2cm + 1cm binding2.54cm (1in)⚠️ Limited Support: @page rules work in most browsers, but support varies. Basic features (size, margins) work well. Advanced features (page counters, running headers) have limited support. Always test in multiple browsers, especially Chrome and Firefox!
Print Preview: Press Ctrl+P (Windows) or Cmd+P (Mac)
Save as PDF: Use print dialog to save as PDF and check margins
DevTools: Chrome DevTools has a "Rendering" tab with print preview
Real Printing: Test with actual printing for best accuracy