How to add Page Number in HTML/Word Doc using CSS

Now you can easily add page number in the footer of an HTML document and can open it with Word with Page number in it. Easy solution to this is CSS. For more details on how to make a page with page number enable follow the given link.

The only limitation to this solution is the content in footer will appear along with the page number itself on the last page according to the div. To solve this we need to make another HTML with css and call it in the CSS of the original one providing the url. To explain it further follow the below steps:
I have developed a set of Office HTML/Word document templates for PBDoc v3. Office HTML was introduced with Office 2000 to allow people to create office documents using HTML/XML in place of the native file formats. Microsoft offer a help file which gives some details of the file format specification, however I found the easiest way to figure it out was to open my standard HTML file, apply the word changes, then save as and look at what word did. Based on what word did I looked up the help descriptions and played about to get the desired effect.The one thing I wanted to achieve was footers on the word documents. However both saving using Word and the help file both specified the footers using an eternal html file which is linked back to the primary file. I wanted to get a solution where by a single file was created which included the footer. I set about dissecting what word did and distilled this down to a simple solution which allowed me to use a single file and still get a proper word footer. The same solution could be used to generate headers.

There is a draw back to this solution in that the text that you want to appear in the footer needs to appear somewhere in the body of the main document, this was a limitation I much preferred to the multiple files option. I opted to putting the text at the end of the document and its not very intrusive.

To get the output working you need to take a standard html file and apply the following changes:

Standard HTMLWord Custom HTMLDescription
<html><html xmlns:v=”urn:schemas-microsoft-com:vml”



Specifies the word and office name spaces. I used this to allow me to setup the documents in print preview mode by default.

@page Section1 {mso-footer:f1;}


p.MsoFooter, li.MsoFooter, div.MsoFooter{


tab-stops:center 216.0pt right 432.0pt;}


You need these style elements defined on the page.

The @page links to the div element.


<div class=”Section1″>

Tells Word to wrap the contents of the body in Section1 (see the css definition above).
<div style=”mso-element:footer”


<p class=”MsoFooter”><span style=’mso-field-code:”

FILENAME “‘> </span>

<span style=’mso-tab-count:2’></span>Page <span style=’mso-field-code:”

PAGE “‘></span> of <span style=’mso-field-code:”

NUMPAGES “‘></span></p>


This is the actual footer, I have a 3 section footer with the file name and page num/count formatted. This will appear in the main file ( I put it as the last html before the close of the main outer div.


This matches the opening div at the start of the body tag to setup the whole html

document in the Section1 which is linked to the footer ID via the CSS.

1) Put the footer in a separate file (just put the html/head/body-tags around the original footer and save it as footer.htm).

2) Then change the style declaration to

@page Section1{mso-footer:url(‘http://..path../footer.htm’) f1}

Have a Happy Day!!