- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - @page
The @page at-rule in CSS is used to specify the styles for printed pages when a web page is printed. It allows you to control the layout and appearance of printed documents generated from a web page. With the @page at-rule, you can define different rules for the page margin boxes, page size, headers, footers, and more.
It helps in customization of page's dimensions, orientations and margins. You can either target all the pages of the document or a sub-set of it using the pseudo-classes of CSS.
Syntax
@page = @page <page-selector-list> { <declaration-list> }
It is advised not to use the viewport-related <length> units, such as, vh, vw, vmin, and vmax, within a @page at-rule.
The @page at-rule, permits a user to give a name to the rule. This name is called in a declaration, using the CSS property page.
page: Permits a selector to use a user-defined named page.
<page-body> includes, page-properties and page-margin-properties
<pseudo-selector> includes the following pseudo-classes:
:first
:left
:right
Margin at-rules
The @page at-rule contains the margin at-rules. These margin at-rules are responsible for targeting a different section of the document, in turn styling the printed page area, as per the property values set in the style block.
The various margin at-rules are as follows:
@top-left
@top-left-corner
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom
Named pages
Performing per page layout and adding page-breaks in a declaration when printing, can be enabled using Named pages. These named pages can be applied using the page property. Thus a user can create different page configurations for use in print layouts.
Example
Here is an example for the @page at-rule.
<html> <head> <style> @page { size: landscape; margin: 15%; } section { page-break-after: always; break-after: page; background-color: aquamarine; width: 500px; } @media print { button { display: none; } } </style> </head> <body> <article> <section> <h2>Header1</h2> <p> Section one </p> </section> <section> <h2>Header2</h2> <p> Section two </p> </section> <section> <h2>Header3</h2> <p> Section three </p> </section> </article> <button style="background-color: green; color: white; font-size: 1em;">Print</button> <script> const button = document.querySelector("button"); button.addEventListener("click", () => { window.print(); }); </script> </body> </html>
In the above example:
a style block is specified for the div element.
the document is divided into three sections and each section breaks into a new page.
as the "Print" button is clicked, the document opens up in the print format and you can see the change in the margin on each page, which is set using the @page at-rule, where size is landscape and margin as 15%.
Descriptors or related properties
The table given below lists all the descriptors related to @page:
Descriptor / Property | Description |
---|---|
page | Specifies the named page, a specific type of page defined by the @page at-rule. |
margin | Sets the margin area on four sides of an element. |
page-orientation | Determines the orientation of the page. |
size | Defines the size and orientation of the box which is used to represent a page. |
:first | Represents the first page of a printed document. |
:left | Represents all left-hand pages of a printed document. |
:right | Represents all right-hand pages of a printed document. |
To Continue Learning Please Login
Login with Google