Skip to content
Related Articles

Related Articles

CSS | @page rule

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Jan, 2022

The CSS @page rule defines the dimension of the page which is gonna be print. There are few important things 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 Descriptor in @page rule those are: 

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

html




@page {
      size: A4;
 }

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

html




@page {
      marks: crop cross;
 }

  • bleed: It extend the bleed area of the box 

html




@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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!