Page Styling

You can use the @page pseudo-selector to style all pages.


@page {
  background: red;
}

Style page by position in document

You can also style specific pages based on their position in the document.


@page :first {
  background: red;
}

For example, to style only the second page:


@page :nth(2) {
  background: red;
}

Named pages

We recommend using <section> tags to contain one or more pages. By default, when you create a new template, you’ll see this CSS is already included:


/* You can use sections as distinct groups of one or more pages */
section {
  break-before: page;
  break-after: page;
}

Now, by putting your content into discrete section elements, you can style pages individually.


<html>
  <body>
    <section class="splash-page">
      This is the first page.
    </section>
    <section>
      This second page has no specific styling.
    </section>
    <section class="signature-page">
      On the third page, you can sign here:
      <p>_______________</p>
    </section>
  </body>
</html>

You can style these sections by setting the page property to define a named page, and then styling each @page as shown.


/* We designate special page types we want to style differently... */
.splash-page {
  page: splash;
}
.signature-page {
  page: signature;
}

/* ...And apply styling to those using the @page pseudo-selector */
@page splash {
  margin: 0;
  background-image: url('splash.png');
}
@page signature {
  margin: 10mm;
}