- 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 - size
The size descriptor of @page at-rule in CSS is useful in defining the size and orientation of the box, that represents the page. Here the size is corresponding to the size of the printed page.
The size of the page is defined either using a scalable keyword or an absolute dimension value.
Possible Values
The size descriptor of @page at-rule in CSS contains one of the following values:
auto: Size of the page is decided by the user agent. Dimesnsions and orientation of the target page is used.
landscape: Content of the page is shown in landscape mode (longest side is horizontal).
portrait: Content of the page is shown in portrait mode (longest side is vertical). Default orientation value.
<length>: Any length value can be passed, where first value corresponds to the width of the box and second to its height. When only one value is provided, it is used for both width and height.
<page-size>: Specifies a keyword which can be one of the following values:
A5: Matches the standard ISO dimensions 148mm x 210mm.
A4: Matches the standard ISO dimensions 210mm x 297mm.
A3: Matches the standard ISO dimensions 297mm x 420mm.
B5: Matches the standard ISO dimensions 176mm x 250mm.
B4: Matches the standard ISO dimensions 250mm x 353mm.
JIS-B5: Matches the JIS standard dimensions 182mm x 257mm.
JIS-B4: Matches the JIS standard dimensions 257mm x 364mm.
letter: Equivalent to the dimensions of letter papers in North America, i.e., 8.5in x 11in.
legal: Equivalent to the dimensions of legal papers in North America, i.e., 8.5in x 14in.
ledger: Equivalent to the dimensions of ledger pages in North America, i.e., 11in x 17in.
Syntax
size: <length> | auto | [ <page-size> || [ landscape | portrait ] ];
CSS size - <page-size> and Landscape Value
Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and landscape.
<html> <head> <style> /* default for all pages */ @page { size: A4 landscape; } p { font-size: 1.5em; } </style> </head> <body> <h1>landscape</h1> <p>See the size and orientation of the page.</p> <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>
CSS size - <page-size> and Potrait Value
Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and portrait.
<html> <head> <style> /* default for all pages */ @page { size: A4 portrait; } p { font-size: 1.5em; } </style> </head> <body> <h1>portrait</h1> <p>See the size and orientation of the page.</p> <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>
CSS size - Custom Size
Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and landscape.
<html> <head> <style> /* default for all pages */ @page { size: 15in 11in; } p { font-size: 1.5em; } </style> </head> <body> <h1>custom size</h1> <p>See the size of the page (custom size).</p> <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>
CSS size - Nesting Inside @media Rule
Following example demonstrates the use of size descriptor of @page at-rule, with the value passed as a keyword and landscape.
<html> <head> <style> @media print { @page { size: 80mm 200mm; } } p { font-size: 1.5em; } </style> </head> <body> <h1>Nesting inside @media rule</h1> <p>See the size of the page.</p> <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>