Tilføj en printervenlig sektion til dit CSS v.hj.a. Style Manageren

CSS koden som fortæller printeren, at denne typografi (EN: style) gælder ved udskrift:
(Alt mellem /* og  */ er kommentarer, som ikke vises)

@media print {
  /*
    Her kommer CSS koden
  */
}

CSS syntaks som identificerer de dele af indholdet, som skal have denne typografi (EN: style)
Identifikationen kan enten ske som 
  - HTML tag navn,
  - Klasse (EN: class) som angives med et foranstillet "." (punktum) eller
  - ID som angives med en foranstillet "#" (havelåge)
Derefter CSS selekteren efterfulgt af ":" (kolon) afsluttet med et ";" (semikolon). Udtrykket skal omkranses af "{" og "}" (hhv. venstre og højre Tuborg parentes)

@media print {
  mitHtmlTag {
    cssSelecter: værdi;
    }
  .minKlasse {
    cssSelekter: værdi;
    }
  #minID {
    cssSelekter: værdi;
    }
}

Eksempel på CSS kode som skjuler elementerne med klassenavnene
header, footer, updateVis, searchInput, searchBtn og hideOnPrint da det ikke giver megen mening, at vise sidehoved, sidefod, hvornår siden er opdateret [der står jo på siden hvornår den er printet], søgefelt/-knap og genvej til redigering (hvis der er en logged in Admin, som printer siden) 

@media print {
  .header, .footer, .updateVis, .searchInput, .searchBtn, .hideOnPrint  {
    display: none;
  }
}

Eksempel på CSS kode som sikrer at tabeller og hvad der ellers måtte være i main-sektionen udnytter hele bredden og ikke laver "tomt fyld" i tabeller.

@media print {
  table, main  {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}

Eksempel på CSS kode som gør al tekst i links, lister (både nummererede og unummererede), afsnit, tabelhovedceller og tabeldataceller ¼ større og teksten sort.

@media print {
  a, li, p, th, td  {
    color: black;
    font-size: 125%;
  }
}

Eksempel på CSS kode som viser alle links og efterstiller linkets destination i parentes.

@media print {
  a:after {
    content: "("attr(href)")";
  }
}

What does the above CSS code do
Line 1 states that this CSS code only applies when the page is being printed.
Line 2 identifies the CSS classes (denoted by "." and the class name) for the header, footer, when the page was last updated, the search field and the search button.
Line 3 identifies the ID attribute tag for the Admin Ribbon, navigation menu, link to the Page Editor (if logged in) and the place holder for Navigation Bar.
Line 4 makes all the above classes and IDs invisible.
Line 6 identifies all table and main elements and sets the width of these to 100 % and removes any system or custom margins and padding.

Line 11 identifies the space after all hyperlinks.
Line 12 writes the destination of each hyper link in parentheses after the displayed link text.

Improving the printer friendly custom CSS style
You can alter and improve this example of a printer friendly custom CSS style any way you like. For example you can decide that all text should be in black (on white paper) so that images remain colorful but text colors are black.
The CSS for that will follow the same principles as the above example. Change the section in line 6 from

table, main {

to

p, h1, h2, h3, h4, h5, h6, a, table, main  {

in front to identify all paragraphs (p), headings (h1 - h6), links (a), tables and what ever else resides in the main section.

Add a line after line 9 with this content:

color: black;

and save you work. If you want to check the results just remember to refresh your page before you print it.

Or you can alter the text size of various elements just by adding a line after line 9 with this content:

font-size: 125%;

and save you work. This will increase the font size by ¼ or 25% making it more areadble if you pages have a small text size.