CSS - 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.
break-before Used to forcefully break the page before a section in print document.
break-inside Used to forcefully break the page or avoid breaking of page inside a section in print document
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.
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.

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.

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.
:left This pseudo class selects all the left-handed pages of a document for styling separately.
:right This pseudo class selects all the right-handed pages of a document for styling separately.
Advertisements