Open In App

CSS @page rule

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS @page rule defines the dimension of the page which is gonna be printed. There are a few important things that should be under control when you want to print a web page those are listed below:  

  • The page size, orientation, margins, border, and padding.
  • Page breaks.
  • Headers and footers.
  • Page counters.
  • Orphans.

All the above things are controllable when you follow the @page rule.

Syntax:  

@page [:left | :right | :first] {
    /* print-specific rules */
} 

Page Descriptor: There are three Descriptors in the @page rule those are: 

  • size: Specify the size of the page box’s containing block. 

CSS




@page {
    size: A4;
}


  • marks: It helps to trim the page that you want to print. 

CSS




@page {
    marks: crop cross;
}


  • bleed: It extends the bleed area of the box 

CSS




@page {
    bleed: 7pt;
}


Example: 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS @page rule</title>
    <style type="text/css">
        /* default for all pages */
        @page {
            margin: 2in;
        }
 
        /* margin on left page */
        @page :left {
            margin: 1in;
        }
 
        /* margin on right page */
        @page :right {
            margin: 3in;
        }
 
        /* top margin on first page */
        @page :first {
            margin-top: 5in;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>CSS Page At-rule</h2>
        <p>
            If you open output in a new window and print the page
            the margin around the text content appears differently
            than it appears on the screen.
        </p>
    </center>
</body>
</html>


Output: When you choose to print the output screen of the above code. 

Supported Browsers: The browsers supported by CSS @page rule are listed below: 

  • Google Chrome 2.0
  • Internet Explorer 8.0
  • Safari 5.1
  • Opera 6.0


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads