HTML CSS - Print Styling

Creating styles for print

Print styling ensures that web content looks good when printed. This tutorial covers advanced techniques for creating print styles using CSS, including media queries, hiding elements, and adjusting styles for print.

Basic Print Styles

Use media queries to apply print-specific styles. Here is an example:

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

    .container {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: 24pt;
        text-align: left;
        margin-bottom: 10px;
    }

    h2, h3 {
        color: black;
    }

    a {
        color: black;
        text-decoration: none;
    }

    .example {
        background: none;
        padding: 0;
        margin: 0;
        border: none;
    }

    .no-print {
        display: none;
    }
}
            

Hiding Elements for Print

Hide unnecessary elements like navigation menus and advertisements for print. Here is an example:

@media print {
    .no-print {
        display: none;
    }
}

/* HTML */
This will not be printed.
            

Adjusting Layout for Print

Adjust the layout for print to ensure content is well-formatted and readable. Here is an example:

@media print {
    .container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .grid-container {
        display: block;
    }

    .grid-item {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}

/* HTML */

    
Item 1
    
Item 2
    
Item 3

            

Styling Links for Print

Ensure that links are styled appropriately for print. Here is an example:

@media print {
    a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }
}

/* HTML */
Visit Example for more information.
            

Page Breaks

Control page breaks to ensure content is split appropriately across pages. Here is an example:

@media print {
    h2 {
        page-break-before: always;
    }

    .no-break {
        page-break-inside: avoid;
    }
}

/* HTML */

    
Section Heading
    
Content that should not be split across pages.

            

Optimizing Fonts for Print

Optimize fonts for print to ensure readability. Here is an example:

@media print {
    body {
        font-family: serif;
        font-size: 12pt;
    }
}
            

Summary

In this tutorial, you learned how to create styles for print using CSS. You explored basic print styles, hiding elements for print, adjusting layout, styling links, controlling page breaks, and optimizing fonts for print. Understanding and applying these techniques will enable you to create web content that is well-formatted and readable when printed.