CSS - @page

The @page at-rule in CSS is used to specify the styles for printed pages when a web page is printed. It allows you to control the layout and appearance of printed documents generated from a web page. With the @page at-rule, you can define different rules for the page margin boxes, page size, headers, footers, and more.

It helps in customization of page's dimensions, orientations and margins. You can either target all the pages of the document or a sub-set of it using the pseudo-classes of CSS.

Syntax

@page = 
   @page <page-selector-list> { <declaration-list> }

It is advised not to use the viewport-related <length> units, such as, vh, vw, vmin, and vmax, within a @page at-rule.

The @page at-rule, permits a user to give a name to the rule. This name is called in a declaration, using the CSS property page.

page: Permits a selector to use a user-defined named page.
<page-body> includes, page-properties and page-margin-properties
<pseudo-selector> includes the following pseudo-classes:
- :first
- :left
- :right

Margin at-rules

The @page at-rule contains the margin at-rules. These margin at-rules are responsible for targeting a different section of the document, in turn styling the printed page area, as per the property values set in the style block.

The various margin at-rules are as follows:

@top-left
@top-left-corner
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

Named pages

Performing per page layout and adding page-breaks in a declaration when printing, can be enabled using Named pages. These named pages can be applied using the page property. Thus a user can create different page configurations for use in print layouts.

Example

Here is an example for the @page at-rule.

<html>
<head>
<style> 
   @page {
      size: landscape;
      margin: 15%;
   }

   section {
      page-break-after: always;
      break-after: page;
      background-color: aquamarine;
      width: 500px;
   }

   @media print {
   button {
      display: none;
   }
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

In the above example:

a style block is specified for the div element.
the document is divided into three sections and each section breaks into a new page.
as the "Print" button is clicked, the document opens up in the print format and you can see the change in the margin on each page, which is set using the @page at-rule, where size is landscape and margin as 15%.

Descriptors or related properties

The table given below lists all the descriptors related to @page:

Descriptor / Property	Description
page	Specifies the named page, a specific type of page defined by the @page at-rule.
margin	Sets the margin area on four sides of an element.
page-orientation	Determines the orientation of the page.
size	Defines the size and orientation of the box which is used to represent a page.
:first	Represents the first page of a printed document.
:left	Represents all left-hand pages of a printed document.
:right	Represents all right-hand pages of a printed document.