Skip to content
Related Articles

Related Articles

CSS | @page rule
  • Last Updated : 22 Aug, 2019

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.




    @page {
          size: A4;
     }
  • marks: It helps to trim the page that you want to print.




    @page {
          marks: crop cross;
     }
  • bleed: It extend the bleed area of the box




    @page {
          bleed: 7pt;
     }

Example:




<!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
  • Interenet Explorer 8.0
  • Safari 5.1
  • Opera 6.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :