Paged Media

CSS paged media refers to a set of properties, @rules and pseudo-class selectors that are used for styling of documents for printing.

• CSS paged media provides additional features and properties specifically made for printed documents.
• With these properties we can control page breaks, margins, headers, footers, and more.
• Some of the key properties of paged media are @page, orphans, widows, break-after, break-before, and break-inside.
• Paged Media properties prevent uneven and awkward printing of webpages.

CSS Paged Media Related Properties

Following is the list of CSS properties related to paged media:

Property	Description	Example
break-after	Used to forcefully break the page after a section in print document.	Try It
break-before	Used to forcefully break the page before a section in print document.	Try It
break-inside	Used to forcefully break the page or avoid breaking of page inside a section in print document	Try It
orphans	Specify minimum number of lines placed at the bottom of a page when whole paragraph can’t be placed at bottom of the page.	Try It
widows	Specify minimum number of lines placed at the top of a page when whole paragraph can’t be placed at top of the page.	Try It

CSS Paged Media @rules

Following is the list of CSS at-rules related to paged media:

Property	Description	Example
@page	This is media query, used to specify different css styles for printed pages.	Try It

CSS Paged Media Pseudo-Classes

Following is the list of CSS pseudo-classes related to paged media:

Property	Description	Example
:first	This pseudo class selects first page of a document for styling separately.	Try It
:left	This pseudo class selects all the left-handed pages of a document for styling separately.	Try It
:right	This pseudo class selects all the right-handed pages of a document for styling separately.	Try It