How to Use CSS @page :first for Cover Pages

The CSS @page :first pseudo-class is a specialized rule within CSS Paged Media used to apply distinct styles exclusively to the first page of a printed or PDF-rendered document. When converting HTML content into paged media—such as reports, books, or invoices—the first page typically serves as the cover or title page. Using :first allows developers to modify margins, remove running headers and footers, and apply unique background designs to the cover without affecting any of the subsequent pages.

Core Purpose and Functionality

When creating multi-page print documents, standard @page rules apply globally to every generated sheet. However, a cover page requires different layout constraints compared to body content. The :first pseudo-selector targets only the initial sheet, giving you granular control over page-box properties.

Common styling adjustments applied via @page :first include:

• Removing Headers and Footers: Page numbers and running chapter titles are typically unwanted on a cover page. The :first selector can clear margin boxes (such as @top-center or @bottom-right) where page numbering resides.
• Adjusting Margins: Standard content pages require margins for binding and readability, while a cover page might require zero margins to enable a full-bleed background graphic or border.
• Background Styling: You can assign full-page background colors or imagery solely to the cover sheet.

Syntax and Implementation

The @page :first rule is written within standard CSS style blocks. It overrides any general @page declarations for page number one.

/* Global settings for all pages */
@page {
  margin: 2cm;
  @bottom-center {
    content: "Page " counter(page);
  }
}

/* Specific settings for the cover page */
@page :first {
  margin: 0;
  background-color: #1a1a2e;
  @bottom-center {
    content: none;
  }
  @top-center {
    content: none;
  }
}

In this example, the global rule assigns a 2cm margin and a dynamic page counter at the bottom of every page. The @page :first rule resets the margin to zero, applies a dark background color, and disables the page numbering for the cover.

Practical Considerations

The @page :first pseudo-class works directly within web browsers through standard print workflows (Print to PDF or physical printing) and is fully supported by dedicated HTML-to-PDF rendering engines such as PrinceXML, WeasyPrint, and Paged.js.

To ensure content does not spill over from the cover page onto the second page, pair the CSS rule with standard page-break controls in your document's HTML elements:

.cover-page {
  break-after: page;
  height: 100vh;
}

This combination guarantees that the cover page content stays isolated on the initial sheet and that the subsequent document content starts cleanly on page two with standard body formatting.