CSS | @page rule

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @page {
          size: A4;
     }

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @page {
          marks: crop cross;
     }

    chevron_right

    
    

  • bleed: It extend the bleed area of the box
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @page {
          bleed: 7pt;
     }

    chevron_right

    
    

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.