Excluding page elements when printing a website
Printing and saving PDFs of a news article or website is useful when you want to have a discussion about it with other people. The page numbers make it easier to reference specific sections. When you print it, there might be sections that you don't want, such as a section leading you to more content or a call to action. Some websites are not built well for printing because they print the header at the top of each page and cover the text. Each news website is slightly different, but the method for excluding items/elements from printing is the same for each site.
To exclude an element when printing a page, you can add display: none; in the CSS for those elements. Below are the details on how to do that with an example.
Step 1: Open the Inspector
First, hover your mouse over an element on the website (such as the one you want to remove). Open the inspector by using the keyboard shortcut Ctrl/⌘ + Shift + i or right clicking and clicking Inspect or Inspect Element. A panel will open on your screen (usually the bottom). This panel is known as the Inspector and is used by professional web developers to build websites.
Step 2: Select the element
In the inspector, find the element that you want to remove. On Firefox, you can right click the element and press Q on your keyboard. On Google Chrome, you can hover over the element and press Ctrl/⌘ + Shift + C on your keyboard.
The element you want to remove may be embedded inside a box that you also want to remove. In that case, you need to select the box.
In this example, we want to remove the <div> container with the call to action:
Step 3: Add display: none;
On the right side of the inspector, under the Rules or Styles tab, find element or element.style and add display: none; underneath it.
Step 4: Print
Print the page using Ctrl/⌘ + P or the menu in the top right corner of your browser. On Chromium browsers such as Google Chrome and the latest Microsoft Edge, you can preview your document to see if you successfully removed the element before printing.
You can bring the elements back unchecking display: none; or by refreshing your page (press Ctrl/⌘ + R).