CSS - page

Quiz

The page property is useful in specifying the named page, which is a type of page that is defined by the @page at-rule.

If a named page is used consecutively by more than one selector, then there is a need to add a forced page break using the break-after CSS property.

Possible Values

The page property of CSS can have one of the following values:

auto: It is the default value.
<custom-ident>: It is a case-sensitive name that is defined in the @page at-rule.

Applies To

All the block level elements.

Syntax

page = auto | <custom-ident>

CSS page - custom-ident Value

Following example demonstrates the use of page CSS property, which takes a <custom-ident> value.

<html>
<head>
<style>
   /* default for all pages */
   @page sample-page {
      margin: 2in;
      page-orientation: rotate-right;
   }

   div {
      page: sample-page;
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <div>
      <h1>page-orientation</h1>
      <p>See the orientation of the text on the page.</p>
      <p>I am turned to right, as it is <b>rotate-right</b>.</p>
      <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   </div>
   <script>
      const button = document.querySelector("button");

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

Print Page