Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsUse the CSS @page rule to style printed pages by position or page type: :first targets the first printed page, :left and :right distinguish facing pages, and :blank targets content-empty pages created by certain forced breaks. Named pages let you apply a separate page layout to chosen content. These rules affect pagination and page formatting; they do not switch a printer into duplex mode.
What CSS named pages and page selectors do
CSS Paged Media controls documents rendered as discrete pages, including print output and print previews. Its @page at-rule styles the page box, including size, orientation, margins, and related print layout. The module also defines page selectors and mechanisms for page-margin areas and generated page numbers. MDN’s CSS paged media overview describes the module and its scope.
A page selector is optional in an @page rule. It can include a page name, one or more standardized pseudo-pages, or both. The pseudo-pages are :first, :left, :right, and :blank. A name identifies a page type that content can request; a pseudo-page identifies a page by its position or blank status. The W3C CSS Paged Media Level 3 specification defines their matching behavior.
How to use the four page selectors
Style the first printed page with :first
:first matches the document’s first printed page. It is useful for giving a cover or opening page a different margin, such as reserving extra room for a title.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
@page {
margin: 20mm;
}
@page :first {
margin-top: 45mm;
}The first page can also match a side selector. When declarations conflict, the pseudo-page rule has greater specificity than an unqualified @page rule, and the W3C specification’s examples show :first overriding left/right declarations for the first page.
Set facing-page margins with :left and :right
For a bound document, the inside margin often needs more space than the outside margin. These rules alternate the larger margin from one side of the spread to the other:
@page :left {
margin-left: 25mm;
margin-right: 18mm;
}
@page :right {
margin-left: 18mm;
margin-right: 25mm;
}Classification follows page progression. In a left-to-right document, the first page is normally a right page; right-to-left progression reverses that assignment. The page selectors change formatting, not the printer’s duplex setting. The W3C specification also requires user agents to honor different left/right declarations in single-sided output, even if page boxes are not transferred to left and right sheets.
Target forced-break pages with :blank
:blank matches content-empty pages that appear because of forced page breaks. The specification identifies left, right, recto, and verso forced-break values as the values that can create such pages. A blank page may also match :left or :right, so explicitly suppress margin content if it should not appear on the blank page.
h1 {
break-before: left;
}
@page :right {
@top-center {
content: "Chapter title";
}
}
@page :blank {
@top-center {
content: none;
}
}The blank-page selector has higher specificity than :right in the specification’s illustrated conflict, so it can suppress the right-page header while leaving other desired page content, such as a page number, in place. Check the actual output engine to confirm the margin-box behavior you need.
Define and apply a named page type
A named page lets a block request a particular page layout through the page property. The name is a case-sensitive custom identifier declared by an @page rule; the property also accepts auto. MDN documents the property and its availability in the CSS page reference.
@page chapter {
size: A4;
margin: 24mm 18mm;
}
.chapter {
page: chapter;
}Apply the class to the block or blocks whose pages should use that named layout. If consecutive elements request different named pages, a forced break may be needed for the transition to become visible. For example:
.chapter {
page: chapter;
break-before: page;
}Use a page break only when the document’s intended structure requires one; otherwise, it can introduce an unnecessary empty or partially filled page. Named pages and page pseudo-pages can be combined, with no space between the name and pseudo-page:
@page chapter:left {
margin-left: 28mm;
}
@page chapter:right {
margin-right: 28mm;
}Understand the cascade and combinations
Page rules participate in a page-specific cascade. An unqualified rule such as @page provides general page settings; a matching pseudo-page rule can override a conflicting declaration. A named-page selector narrows the rule to pages of that type, and a combination such as @page chapter:left narrows it further.
- Use
@pagefor defaults that should apply across the document. - Use
@page :first,@page :left, or@page :rightfor position-dependent differences. - Use
@page namewithpage: nameto assign a named layout to content. - Use a combined selector such as
@page chapter:leftwhen a named page type also needs side-specific formatting. - Use
@page :blankto override content such as headers on blank pages created by forced breaks.
Selector matching and property support are distinct questions: an engine may recognize a page selector while offering incomplete support for another part of the paged-media standard, such as a page-margin feature.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check browser and print-engine support
MDN lists the CSS page property as widely available across browsers since February 2023, while warning that not every part of the latest standard is implemented. That does not establish identical support for every selector combination, page-break outcome, margin box, or generated counter in every browser and CSS-to-PDF engine.
MDN specifically reports that the bleeds and marks page descriptors currently have no browser support. For page-margin at-rules and advanced generated content, validate the output in the exact browser or PDF engine used in production rather than assuming a successful stylesheet parse proves the printed result is correct.
Test the printed result methodically
- Choose the target output engine. Identify the browser’s print preview, print-to-PDF path, or CSS-to-PDF engine that will produce the real output.
- Start with a small fixture. Include enough content to cross multiple pages, a first-page rule, at least one left/right difference, and a forced break intended to create a blank page.
- Inspect pagination. Confirm which page is first, whether facing-page margins alternate as expected, and whether the forced break creates a content-empty page.
- Inspect page-margin content. Check headers, footers, and counters separately, including whether
:blankoverrides content inherited from a left or right page rule. - Repeat for the production configuration. Test the actual page size, orientation, print settings, and output engine; different implementations may not support the same parts of the standard.
When comparing output engines, assess selector coverage for all four pseudo-pages and named combinations; forced-break and blank-page behavior; support for page-margin boxes and generated counters; treatment of left/right pages in duplex and single-sided output; and fidelity in the engine you will ship. There are no established adoption or performance statistics in the cited standards and reference documentation, so support should be judged against the target engine’s documented behavior and your rendered output.
Troubleshoot common pagination problems
The first-page style appears on the wrong page
:first means the first printed page of the document, not the first element with a particular class. Check whether earlier content, such as a title or introductory block, occupies page one. Also check the page sequence and output preview before changing margins.
Left and right margins do not alternate as expected
Confirm the document’s page progression direction. Left-to-right progression normally starts on a right page, while right-to-left progression reverses the assignment. Remember that these selectors govern page formatting; they do not configure the printer for double-sided printing.
A blank page still has a header
Verify that the page is genuinely content-empty and was generated by a qualifying forced break. Then add an explicit @page :blank rule for the relevant margin box, such as @top-center { content: none; }. A blank page can also match :left or :right, so do not rely on side rules alone to remove a header.
Recommended Free Tools
A named layout does not start on a new page
Check that the content has the matching page value and that the name matches the declared @page name, including case. If neighboring elements use different page names, add an appropriate forced break, such as break-before: page or break-after: page, to make the transition explicit.
A header, footer, or page number is missing
Separate selector matching from margin-box and generated-content support. Verify that the engine supports the specific page-margin at-rule or counter you are using, then inspect the result in its print or PDF output. MDN’s paged-media overview notes that parts of the standard are not universally implemented.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capture a reference page without configuring a browser
If you need a rendered website screenshot for debugging or documentation rather than a browser-based print preview, ScreenshotNeo is a website screenshot API and MCP server for developers. The CSS rules above still need to be tested in the print or PDF engine that will produce your paged document.
Or skip the browser setup
Make one GET request with the page URL. This cURL example saves a WebP screenshot; the API can also return PNG, JPEG, or PDF. See the ScreenshotNeo API documentation for request options.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteBest Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie banners are accepted and removed before capture, along with known newsletter popups and chat widgets; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Each response identifies its page verdict and billing status in headers.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The Free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month, with no card.
Frequently Asked Questions
Do :left and :right turn on double-sided printing?
No. They style page boxes according to page progression; duplex printing is a separate printer or output setting.
Can :blank match an intentionally empty page?
It matches content-empty pages that result from forced page breaks, not every page that happens to contain little or no visible content.
Can I use a name and a pseudo-page together?
Yes. For example, @page chapter:left selects left pages of the named page type, with no space between the name and pseudo-page.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
