How to use HTML to print header and footer on every printed page of a document?

Question

Is it possible to print HTML pages with custom headers and footers on each printed page?

I\'d like to add the word \"UNCLASSIFIED\" in Red, Arial, size 16pt to the t

Answer 1

Use page breaks to define the styles in CSS:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Then add the markup in the document at the appropriate places:

unclassified

unclassified
unclassified

unclassified
unclassified

unclassified
unclassified

unclassified
unclassified

References

• CSS Paged Media: Page Breaks

• MDN: page-break-before

• MDN: break-before

• Multi-column Layout

• XHTML Print: Second Edition

• Webkit Bug 5097: CSS2 page-break-after does not work

• Print HTML FAQ: Will the program respect CSS styles such as page-break-after?

• How to deal with page breaks when printing a large HTML table