CSS - Paged Media

CSSpaged mediarefers 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 topaged media:

PropertyDescriptionExamplebreak-afterUsed to forcefully break the page after a section in print document.Try Itbreak-beforeUsed to forcefully break the page before a section in print document.Try Itbreak-insideUsed to forcefully break the page or avoid breaking of page inside a section in print documentTry ItorphansSpecify minimum number of lines placed at the bottom of a page when whole paragraph can’t be placed at bottom of the page.Try ItwidowsSpecify 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 CSSat-rulesrelated to paged media:

PropertyDescriptionExample@pageThis is media query, used to specify different css styles for printed pages.Try It

CSS Paged Media Pseudo-Classes

Following is the list of CSSpseudo-classesrelated to paged media:

PropertyDescriptionExample:firstThis pseudo class selects first page of a document for styling separately.Try It:leftThis pseudo class selects all the left-handed pages of a document for styling separately.Try It:rightThis pseudo class selects all the right-handed pages of a document for styling separately.Try It