CSS Print Styles

CSS print styles allow us to optimize how a website appears when a user prints it. The @media print rule makes it possible to apply specific styles for printing, such as hiding unnecessary elements or setting different font sizes.

Basic print styles

Rules defined in an @media print block only apply when the document is printed. This is especially useful for removing navigation menus, ads, or footers from the printed version.

In this example, navigation and footer elements do not appear when printing, and the text is displayed larger and in black.

Page size and pagination

CSS print rules allow us to set page sizes and margins with the @page rule and to add page breaks (page-break) for better content organization.

In this example, the page margin is set to 2 cm, and each new chapter heading starts on a new page.

Tips for print styles

When designing print styles, it is important to keep the content readable and ensure that only necessary elements are included on paper.

• Remove menus, ads, and other irrelevant elements from the print view.
• Use high contrast colors and appropriate font sizes for easier readability.
• Set page breaks to logically organize content, for example before chapters.