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 toolsLast modified: April 2nd, 2026
