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

Next lesson: Summary - Multi-column page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies