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 - 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 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