CSS for Print Stylesheets

Introduction

Print stylesheets optimize web pages for printing, ensuring readability, removing unnecessary elements, and improving paper usage efficiency.

1. Creating a Print Stylesheet

Use the @media print query to define styles specific to printing.

@media print {
    body {
        font-size: 12pt;
        color: black;
        background: none;
    }
}

Linking an External Print Stylesheet

<link rel="stylesheet" href="print.css" media="print">

2. Hiding Unnecessary Elements

Elements like navigation, ads, and footers are unnecessary in print.

@media print {
    nav, .sidebar, .ads {
        display: none;
    }
}

3. Optimizing Text and Layout

• Use readable fonts like serif for better legibility.
• Set appropriate margins using @page.

@page {
    margin: 1in;
}

• Force page breaks where needed.

h1 {
    page-break-before: always;
}

4. Handling Links and Colors

Convert links to text for better clarity in print.

a::after {
    content: " (" attr(href) ")";
}

Remove background colors and images.

* {
    background: none !important;
    color: black !important;
}

Conclusion

Using print stylesheets ensures a clean, professional print layout, enhancing usability for users who need hard copies.