Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Role of size property in CSS to set the size and orientation of a page box
The CSS size property specifies the size and orientation of a page box when printing. This property is primarily used within @page rules to control how content appears on printed pages.
Syntax
@page {
size: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
The page box will be set to the size and orientation of the target sheet |
landscape |
Overrides the target's orientation. The longer sides are horizontal |
portrait |
Overrides the target's orientation. The shorter sides are horizontal |
length |
Creates an absolute page box with specified dimensions. One value sets both width and height |
Example: Setting Page Orientation
The following example sets the page orientation to landscape for printing −
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: landscape;
margin: 1in;
}
.content {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.print-info {
color: #666;
font-style: italic;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="print-info">This page will print in landscape orientation</div>
<h2>Sample Document</h2>
<p>This content will be printed on a landscape-oriented page with 1-inch margins on all sides.</p>
</div>
</body>
</html>
A document with styled content appears on screen. When printed, it will use landscape orientation with 1-inch margins.
Example: Custom Page Size
You can also specify exact dimensions using length values −
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: 8.5in 11in; /* Width and height */
margin: 0.5in;
}
.document {
font-family: 'Times New Roman', serif;
line-height: 1.6;
padding: 10px;
}
</style>
</head>
<body>
<div class="document">
<h2>Letter Size Document</h2>
<p>This document is specifically sized for US Letter format (8.5" × 11") with 0.5-inch margins.</p>
</div>
</body>
</html>
A formatted document appears that will print on US Letter size paper (8.5" × 11") with half-inch margins.
Conclusion
The size property within @page rules provides precise control over print layout. Use landscape or portrait for orientation control, or specify exact dimensions for custom page sizes.
Updated on: 2026-03-15T11:37:24+05:30
212 Views
Advertisements