Login

Please fill in your details to login.





printing part of a page using css

Every wanted to print just part of a webpage? Well, read on...
1
Inspect the HTML of the page and find the block you would like to print.
2
If there isn't a specific block which contains the content you would like to print, then you might have to edit the HTML to add it in.
3
Make sure the block has an ID associated with it. This will make sure that only this portion of the page prints.
4
Select the block and press the '+' button in the style editor to add a custom rule for that element in the inspector stylesheet
5
Add the following CSS rules

@media print{
  *{
    visibility:hidden;
  }
  #id-to-print {
    visibility:visible;
    position: absolute;
    left: 0;
    top: 0;
  }
  #id-to-print *{
    visibility: visible !important;
  }
}


6
You can force the page to render in print layout by choosing
Emulate css media type > print
from dev tools menu > more tools
Last modified: April 2nd, 2026
The Computing Café works best in landscape mode.
Rotate your device.
Dismiss Warning