{"id":6446,"date":"2022-07-16T13:09:47","date_gmt":"2022-07-16T11:09:47","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/select-printable-parts-of-a-web-page-with-css\/"},"modified":"2026-09-02T19:31:32","modified_gmt":"2026-09-02T17:31:32","slug":"select-printable-parts-of-a-web-page-with-css","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/select-printable-parts-of-a-web-page-with-css\/","title":{"rendered":"Select Printable Parts of a Web Page with CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Seleccionar partes imprimibles de una p\u00e1gina web con CSS\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/leZekem_VLY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"como-imprimir-una-pagina-web-23d3f6ce-140d-46da-bd4f-c9ac0fc1c03c\">How to Print a Web Page<\/h2>\n\n<p class=\"wp-block-paragraph\">Sometimes we need to print the content of a web page to have it printed on paper. Browsers (<a href=\"https:\/\/www.google.com\/intl\/es\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Chrome<\/a>, <a href=\"https:\/\/www.microsoft.com\/es-es\/edge\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Edge<\/a>, <a href=\"https:\/\/www.mozilla.org\/es-ES\/firefox\/new\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mozilla Firefox<\/a>, <a href=\"https:\/\/www.apple.com\/es\/safari\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apple Safari<\/a>, and <a href=\"https:\/\/www.opera.com\/es\" target=\"_blank\" rel=\"noreferrer noopener\">Opera<\/a>) include a function for this that makes the task easier. We can invoke this function from the browser itself but also from Elementor, so before anything else let&#8217;s see how we can print a web page.  <\/p>\n\n<p class=\"has-text-align-center wp-block-paragraph\"><img alt=\"Icono del navegador Google Chrome\" loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4773\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_chrome.png\" alt=\"\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4774\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_edge.png\" alt=\"Microsoft Edge\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"31\" class=\"wp-image-4775\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_firefox.png\" alt=\"Firefox\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4777\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_safari.png\" alt=\"Safari\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4776\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_opera.png\" alt=\"Opera\"\/><\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">The keyboard shortcut to print the active page in any of the above browsers is <strong>CTRL+P<\/strong> (Windows) and <strong>Command+P<\/strong> (Mac).<\/p>\n<\/blockquote>\n\n<h3 class=\"wp-block-heading\" id=\"google-chrome-a253b023-f825-424f-bef5-a6c0cae9eda6\">How to Print a Web Page with Google Chrome?<\/h3>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.google.com\/intl\/es\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"\">Google Chrome<\/a> is by far the most popular internet browser, with a <a href=\"https:\/\/netmarketshare.com\/browser-market-share.aspx\" target=\"_blank\" rel=\"noreferrer noopener\">70% share<\/a> of users who prefer to use this browser. To print the active page, follow these steps. <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-google-chrome.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-google-chrome.gif\" alt=\"Print a page with Google Chrome\" class=\"wp-image-4780\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Open the page you want to print.<\/li>\n\n\n\n<li>Click on the Google Chrome customization menu <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"25\" class=\"wp-image-4778\" style=\"width: 25px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-google-chrome.png\" alt=\"Google Chrome Menu\"\/> and from the pop-up menu click on <strong>Print&#8230;<\/strong><\/li>\n\n\n\n<li>The print configuration window will open and you&#8217;ll only need to click the <strong>Print<\/strong> button.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"como-imprimir-una-pagina-web-con-edge-31d6d273-9f6a-4e50-b544-f7979d25d7ce\">How to Print a Web Page with Edge?<\/h3>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.microsoft.com\/es-es\/edge\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Edge<\/a> is the successor to Microsoft Internet Explorer, which at one time was the most widely used, mainly because it came integrated into the Windows operating system. Microsoft Edge remains the default on computers running Windows 10 and later, and is currently the second most used browser with an <a href=\"https:\/\/netmarketshare.com\/browser-market-share.aspx\" target=\"_blank\" rel=\"noreferrer noopener\">8% share<\/a>.  <\/p>\n\n<p class=\"wp-block-paragraph\">Microsoft Edge has a significant performance advantage over Google Chrome in terms of memory usage. Simply put, Edge uses fewer resources. Chrome used to be known for its low RAM usage, but these days it has increased significantly.  <\/p>\n\n<p class=\"wp-block-paragraph\">Just like Google Chrome, it includes a function to print a web page that is extremely simple\u2014let&#8217;s see how it&#8217;s done.<\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Edge.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Edge.gif\" alt=\"Print a page with Microsoft Edge\" class=\"wp-image-4781\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Open the page you want to print.<\/li>\n\n\n\n<li>Click on the Edge <em>Settings and more<\/em> menu &#8230; and from the pop-up menu click on <strong>Print<\/strong>.<\/li>\n\n\n\n<li>The print configuration window will open and you&#8217;ll only need to click the <strong>Print<\/strong> button.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"como-imprimir-una-pagina-web-con-firefox-6588560c-a98c-4449-a515-816e3671ad0d\">How to Print a Web Page with Firefox?<\/h3>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.mozilla.org\/es-ES\/firefox\/new\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mozilla Firefox<\/a> is a robust browser that stands out from the rest for its security and speed. It&#8217;s my preferred browser since I like the web developer tools better than those in Chrome or Edge. Below we&#8217;ll see how we can print a web page. <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Firefox.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Firefox.gif\" alt=\"Print a page with Mozilla Firefox\" class=\"wp-image-4782\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Open the page you want to print.<\/li>\n\n\n\n<li>Click on the application menu <img loading=\"lazy\" decoding=\"async\" width=\"21\" height=\"18\" class=\"wp-image-4770\" style=\"width: 21px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-firefox.jpg\" alt=\"Firefox Menu\"\/> and from the pop-up menu click on <strong>Print<\/strong>&#8230;<\/li>\n\n\n\n<li>The print configuration window will open and you&#8217;ll only need to click the <strong>Print<\/strong> button.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"anadir-un-boton-o-un-enlace-para-imprimir-la-pagina-activa-2a6e9be5-e875-4ddc-bdf1-0928ee88be39\">Add a Button to Print the Active Page<\/h2>\n\n<p class=\"wp-block-paragraph\">We can add a button to print the active page, for example in the <em>Single Post<\/em> template or on any page, so the user can invoke the browser&#8217;s print page function by clicking this button. Let&#8217;s see how to do it. <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-boton-imprimir.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-boton-imprimir.gif\" alt=\"Insert print page button in Elementor\" class=\"wp-image-4768\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>In the Elementor builder, click on <img loading=\"lazy\" decoding=\"async\" width=\"21\" height=\"21\" class=\"wp-image-4772\" style=\"width: 21px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/widgets.jpg\" alt=\"Elementor Widgets\"\/> search for the <strong>Share Buttons<\/strong> widget and drag it to the part of the document where you want to insert it.<\/li>\n\n\n\n<li>In the Content tab, click the <strong>+Add Item<\/strong> button and under Network select <strong>Print<\/strong>.<\/li>\n\n\n\n<li>Now you can customize the button&#8217;s text and styles to your liking.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"crear-una-clase-css-para-ocultar-partes-que-no-queremos-que-se-impriman-c716fad3-1bac-47e9-980d-120317681141\">Create a CSS Class to Hide Parts We Don&#8217;t Want Printed<\/h2>\n\n<p class=\"wp-block-paragraph\">The page styles for printing don&#8217;t have to be the same as those we use to display it on a screen (computer, tablet, or mobile phone). When printing, we may want to hide certain parts (header, footer, sidebar, &#8230;), change margins, colors, fonts, etc. We can do all of this by including the <strong>@media print<\/strong> rule in our custom CSS styles.  <\/p>\n\n<p class=\"wp-block-paragraph\">We can change many styles, but we won&#8217;t go into detail and will simply see how we can hide the parts of our page or template that we don&#8217;t want printed. Let&#8217;s look at an example:<\/p>\n\n<pre class=\"wp-block-code\"><code>@media print {\n     header {display: none !important;}\n     footer {display: none !important;}\n     .noimprimir {display: none !important;}\n     body {background: #fff !important;}     \n}<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">In the example above we see how we&#8217;ve created a series of CSS classes within the <strong>@media print<\/strong> rule that will only be used when printing the document, so they won&#8217;t affect how we view it on screen. Let&#8217;s see how to add this code to our custom CSS in Site Settings: <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-css-personalizado.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-css-personalizado.gif\" alt=\"Insert custom CSS\" class=\"wp-image-4769\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Launch the Elementor builder by entering any page or template.<\/li>\n\n\n\n<li>Click on the Hamburger menu <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"18\" class=\"wp-image-4785\" style=\"width: 25px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-hamburguesa.jpg\" alt=\"Hamburger menu\"\/> in the upper left corner.<\/li>\n\n\n\n<li>Click on <strong>Site Settings<\/strong>.<\/li>\n\n\n\n<li>From the options panel, click on <strong>Custom CSS<\/strong>.<\/li>\n\n\n\n<li>In the <em>Add your own custom CSS here<\/em> box, insert the code you need.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">Basically we&#8217;ve hidden everything inside the <strong>header<\/strong> and <strong>footer<\/strong> for printing, and we&#8217;ve also included a <strong>.noprint<\/strong> class to assign to elements we don&#8217;t want printed, such as the print button itself, comments, etc. Finally, I&#8217;ve included a <strong>body<\/strong> class to set the background to white\u2014this is only necessary if we&#8217;ve configured the background with some color. <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">The <strong>!important<\/strong> rule is used to add more importance to a property\/value than normal. In fact, if you use the <strong>!important<\/strong> rule, you will override ALL previous style rules for that specific property on that element. <\/p>\n<\/blockquote>\n\n<p class=\"wp-block-paragraph\">We must keep in mind that for the <strong>header<\/strong> and <strong>footer<\/strong> classes to work, we must have assigned these HTML tags to the <em>Header<\/em> and <em>Footer<\/em> templates. Let&#8217;s see how we can do this: <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/asignar-etiqueta-header-a-la-cabecera.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/asignar-etiqueta-header-a-la-cabecera.gif\" alt=\"Assign header tag to Header\" class=\"wp-image-4779\"\/><\/a><\/figure>\n\n<h2 class=\"wp-block-heading\">Links of Interest<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries.asp\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Media Queries<\/a> | W3 Schools<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video How to Print a Web Page Sometimes we need to print the content of a web page to have it printed on paper. Browsers (Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari, and Opera) include a function for this that makes the task easier. We can invoke this function from the browser itself [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6447,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"How to Select Printable Web Page Sections with CSS","_seopress_titles_desc":"How to print a web page Sometimes we need to print the content of a web page to have it printed on paper. Browsers (Google Chrome\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[384],"tags":[385,386],"class_list":["post-6446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-web-design","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6446"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6446\/revisions"}],"predecessor-version":[{"id":6448,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6446\/revisions\/6448"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6447"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}