Open In App

CSS @page rule

Last Updated : 09 Jun, 2023
Like Article

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.


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


@page {
    size: A4;

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


@page {
    marks: crop cross;

  • bleed: It extends the bleed area of the box 


@page {
    bleed: 7pt;



<!DOCTYPE html>
<html lang="en">
    <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;
        <h2>CSS Page At-rule</h2>
            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.

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

Similar Reads

How to Add a @tailwind CSS Rule for CSS Checker ?
Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS. In this article, we will ex
4 min read
How to display search result of another page on same page using ajax in JSP?
In this example, we are creating a search bar to display the result on the same page in using ajax in JSP. AJAX stands for Asynchronous JavaScript and XML. Where Ajax is mainly used for Displaying another web page content on the same web page without refreshment of the page. You can read more about ajax technology here. Approach: We use the JQuery
2 min read
How to show Page Loading div until the page has finished loading?
There are a lot of ways in which we can show a loading div but we have figured out the most optimal solution for you and that too in pure vanilla JavaScript. We will use the document.readyState property. When the value of this property changes, a readystatechange event fires on the document object. The document.readyState property can return these
2 min read
How to pass form variables from one page to other page in PHP ?
Form is an HTML element used to collect information from the user in a sequential and organized manner. This information can be sent to the back-end services if required by them, or it can also be stored in a database using DBMS like MySQL. Splitting a form into multiple steps or pages allow better data handling and layering of information. This ca
4 min read
How can a page be forced to load another page in JavaScript ?
In JavaScript, you can force a page to load another page by using the window.location object. There are a few methods to achieve this. To force a page to load another page in JavaScript, we have multiple approaches: Below are the approaches used to force a page to load another page in JavaScript: Table of Content Using window.location.replaceUsing
2 min read
How to redirect a page to another page in HTML ?
Redirecting a page in HTML involves sending users to a different web page automatically or upon interaction. This is typically achieved using the anchor tag's href attribute or the meta tag with the HTTP-equiv attribute set to refresh and the content attribute specifying the time delay and destination URL. Table of Content Redirect using a meta tag
3 min read
CSS column-rule-width Property
The column-rule-width property in CSS is used to change the width of the column rule i.e., the vertical lines between the columns. Syntax: column-rule-width: length|thin|medium|thick|initial|inherit; Default Value: medium Property Values: thin: It is used to set a thin rule between the columns.medium: It is used to create a medium width rule betwee
3 min read
CSS column-rule Property
The column-rule property in CSS is used to specify the width, style, and color of the rules between the columns. Syntax: column-rule: column-rule-width column-rule-style column-rule-color| initial|inherit; Property Values: column-rule-width: This value is used to set the width of the rule between the columns. The default value of this property-valu
2 min read
CSS column-rule-style Property
The column-rule-style property in CSS is used to set the style of the column rule between the columns on a multi-column layout. Syntax: column-rule-style: none|double|groove|ridge|inset|hidden|dotted| dashed|solid|outset|initial|inherit Property Values: The column-rule-style property contains many values which are listed below: none: It is the defa
3 min read
CSS column-rule-color Property
The column-rule-color property of CSS is used to change the color of the rule between the column. Syntax: column-rule-color: color | initial | inherit Property Values: color: It is used to set the rule color to any valid CSS color.initial: It is used to set the default color to the rule.inherit: In this the color will be inherited from its parent e
3 min read