@page Rule - HTML CSS CSS Property

HTML CSS examples for CSS Property:page Rule

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. page Rule

Description

The @page rule defines the dimensions, orientation, and margins of a page box, which are used for print previewing and printing Web documents from the browser.

Syntax

The syntax of this at-rule is as follows: 

@page [:left | :right | :first] { /* print-specific rules */ }

The example below shows the @page property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS @page rule</title>
  <style type="text/css">
    @page {<!--from ww  w .j  av  a  2  s. c o m-->
        margin: 2in;    /* default for all pages */
    }
    @page :left {
        margin: 1in;    /* margin on left page */
    }
    @page :right {
        margin: 3in;    /* margin on right page */
    }
    @page :first {
        margin-top: 5in;    /* top margin on first page */
    }
</style>
 </head>
 <body>
  <h1>CSS Page At-rule</h1>
  <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.
  
  <br/>
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.   
  </p>
    
  <p><strong>Warning:</strong> The @page rule do not supported by Firefox.</p>
 </body>
</html>

Related Tutorials