Document Generation 4

docgen4.css

/* add margin and size to our page */
@Page {
  size: 300px;
  margin: 20px;
  /* add page's header and footer */
  @top-left { 
    content: element(header-section); 
  }
  @bottom-left { 
    content: element(footer-section);
  }
}
/* sets the header as the matching element */
.header-section { 
  position: running(header-section); 
  left: 0; 
  right: 0; 
  height: 30px;
  background: #eeeeee;
}
/* sets the footer as the matching element */
.footer-section { 
  position: running(footer-section); 
  left: 0; 
  right: 0; 
  height: 30px;
  background: #cccccc;
}
/* add the page number to any matching elements */
.page-number:before { 
  content: counter(page); 
}
/* add the page total to any matching elements */
.page-count:before { 
  content: counter(pages); 
}

docgen4.html

<apex:page renderAs="PDF">
    
  <apex:stylesheet value="{!$Resource.myPageStyle}"/>
    
  <div class="header-section">
    I am a header
  </div>
    
  <div class="content">
    I am the page content
  </div>
    
  <div class="footer-section">
    I am a footer. This is page <span class="page-number"></span> of <span class="page-count"></span>
  </div>
    
</apex:page>