Print styles
Learn print styles with @media print.
The @media print block
The @media print block applies only when the page is printed. Inside it you hide menus, ads and forms that aren't needed on paper; set the text color to black and the background to white; remove underlines from links.
The printed output becomes clean and ink-friendly. Screen styles are not turned off; the print block just layers on top.
Hide the menu when printing
When printing, navigation menus, ads and search boxes are useless. Inside @media print, write .nav, .ads { display: none; } to drop them from the output. The page prints only the main content.
Removing colored backgrounds also saves ink; browsers skip backgrounds by default, but adding background: #fff still keeps things consistent.
Print-friendly colors
Light gray text becomes unreadable when printed; colored backgrounds burn ink. Inside @media print, writing body { color: #000; background: #fff; } turns the output into black on white.
You can also remove underlines from links; clicking makes no sense on paper. Switching to a serif font helps long paragraphs read more easily on paper.
Exercise Build the print layout
Open an @media print block. Inside it, hide the .nav element with display: none and set the body text color to black (#000). Write only this block.
Show example solution
@media print {
.nav {
display: none;
}
body {
color: #000;
}
}Test yourself
-
Which media query is used for print styles?
/* ? */ @media ____ { .nav { display: none; } }- @media screen
- @media print
- @media tv
- @media all and print
Show answer
@media print — Correct. The @media print block runs only when printing.
-
Write the print media type
@media ____ { .nav { display: none; } body { color: #000; } }Show answer
@media print { .nav { display: none; } body { color: #000; } } -
Match each declaration to its print role
- @media print
- Print condition
- display: none
- Hide when printing
- color: #000
- Black text color
- background: #fff
- White background