CSS Print Styles

Hello Experts,

I was wondering if anyone could provide me CSS for a print stylesheet. I have looked on the web but I see some people are using different styles / properties and was wondering if there is a particular CSS stylesheet that should be applied.
LVL 4
asp_net2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
There is no default because every site is different.
By default the browser will hide all background images, if you need to hide/rearrange/restyle any other elements then you just need to put them in the print.css
All the print.css does is override your normal rules with whatever you put in it
For example if you wanted to hide the menu in print mode then you would add a css class for the menu to your print.css e.g.

.my_nav_menu_class_name {
     display:none
}
0
asp_net2Author Commented:
This is what I have found below. Notice the media query, my worry is that the style may not work in IE8 since IE8 does not support media queries. You thoughts?

@media print {
   body {
      color: #000;
      background: #fff;
      font-family: Georgia, ‘Times New Roman’, serif;
      font-size: 12px;
   }

   h1 {
      color: #000;
      background: none;
   }

   h2, h3 {
      page-break-after: avoid;
   }

   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }

   img {
      max-width: 100% !important;
   }

   header, nav, aside, footer {
      display: none;
   }

   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }

   header h1 {
      margin-right: 200px;
      margin-bottom: 2rem;
      line-height: 1.5;
   }

   article {
      page-break-before: always;
   }

   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }

   article a[href^="#"]:after {
      content: "";
   }

   a:link:after { content: " (" attr(href) ") "; }

   ul, img {
   page-break-inside: avoid;
   }

   @page {
      margin: 2cm;
   }

}

Open in new window

0
GaryCommented:
Remove the media query - you just need standard css in the file and then in your page just add

<link media="print" href="/print.css" type="text/css" rel="stylesheet">

This will only apply when you attempt to print the webpage because you are setting the media to print
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

asp_net2Author Commented:
Ok, am I missing anything else above that I should be adding?
0
GaryCommented:
What would you be missing?
Make sure the print.css is after your other style sheets.
0
asp_net2Author Commented:
Not sure, I'm referring to styles for elements in the .css file that I provided above. Do I need to include any other styles to other elements?
0
GaryCommented:
Empty the print.css completely.
Go to print preview and see if anything doesn't belong there.  If it doesn't then just add a style in the print.css to remove it.
The two main things to remove from the print version are the navigation menu and usually the footer - since these elements usually just contain links there is no point printing them.

If you think something should be restyled e.g. maybe some text would look better if you reduced the font then just add a style class for that element
Depending on how big your page is you may find it easier to add a page break into the print.css where you want the page to break (i.e. when it should move to a new print page)
0
asp_net2Author Commented:
Ok, the two things that I see during a print preview that I would like to remove but not sure how.

- Page Title and the Page count on the top right
- The URL at the bottom of the page
0
GaryCommented:
You cannot affect those - they are user specified in the print dialog
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.