📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › CSS Mastery › CSS Print Styles

CSS Print Styles

4 min read
Use @media print to hide navigation and show link URLs with a::after { content: attr(href) }. page-break-inside: avoid keeps tables on one page. @page { margin: 2cm } sets the print margin for the document.

Print-Specific CSS

@media print {
    /* Hide navigation and decorative elements */
    nav, aside, footer, .btn, .ad { display: none; }

    /* Expand links */
    a::after { content: " (" attr(href) ")"; }

    /* Page breaks */
    h2 { page-break-before: always; }
    pre { page-break-inside: avoid; }

    @page {
        margin: 2cm;
        size: A4;
    }
}