CSS @page rule

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

Explore