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
Paged Media in CSS
Paged media differ from continuous media in that the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages that are displayed on computer screens, etc.
The CSS2 defines a page box, a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas −
- The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for a layout that occurs between page breaks.
- The margin area − It surrounds the page area.
Syntax
@page {
property: value;
}
@page :selector {
property: value;
}
Page Box Model
Common Page Properties
| Property | Description |
|---|---|
size |
Sets the page box size and orientation |
margin |
Sets the page margins |
page-break-before |
Controls page breaks before an element |
page-break-after |
Controls page breaks after an element |
Example: Setting Page Margins for Print
The following example sets custom margins for printed pages −
<!DOCTYPE html>
<html>
<head>
<style>
@page {
margin: 2cm;
size: A4;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.chapter {
page-break-before: always;
margin-bottom: 2em;
}
h1 {
color: #333;
border-bottom: 2px solid #007acc;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="chapter">
<h1>Chapter 1</h1>
<p>This content will start on a new page when printed. The page margins are set to 2cm on all sides.</p>
</div>
<div class="chapter">
<h1>Chapter 2</h1>
<p>This chapter also starts on a new page due to the page-break-before property.</p>
</div>
</body>
</html>
When printed or in print preview, each chapter starts on a new page with 2cm margins on all sides. The page size is set to A4 format.
Page Selectors
CSS provides specific selectors for different page types −
@page :first {
margin-top: 5cm;
}
@page :left {
margin-left: 3cm;
margin-right: 2cm;
}
@page :right {
margin-left: 2cm;
margin-right: 3cm;
}
Conclusion
Paged media CSS allows you to control how content appears when printed or displayed in discrete pages. The @page rule and related properties provide fine control over page layout, margins, and breaks for professional document formatting.
Updated on: 2026-03-15T11:37:43+05:30
126 Views
Advertisements