In the previous article in this series I showed how to create a robust web page in HTML. In this article, we will expand this further using a style sheet to add our own
choice of formatting. First, we must add a line to our template from the previous article. The template is called “Web page.dot”.
Open Web page.dot in Word.
Copy and paste a new header section into the template as follows to replace the existing header section:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css"
/>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
Save this version of the template as a Document Template called "Web page with formatting.dot".
Now use the process described in the previous article (part 2) to create a new version of the web page.
Create a new Word document from your latest Word template. Add the content as before, Add carriage return tags as before.
You may add a title of your choice between the <title> and </title> tags and then save your new page: go to File >Save As and give your new page a file name such as “test2.html” and remember to set the Save as type to Plain Text.
Now will use a style sheet to format the page as we wish. Copy and paste the following text into a new Word document:
@charset "iso-8859-1";
body {background-color:white;font-family:"Tahoma","Arial",sans-serif;}
p { color: black; font-size:16px ;}
h1 { color: black; font-size:20px ; font-weight:bold; }
Using File > Save As, save the file with the name “layout.css” and type “Plain Text”. Make sure it’s in the same folder as your test page.
Now view test2.html in your web browser: it should have changed in appearance. Mine now looks like this 
Some people may find the style sheet rather impenetrable. Word can help you. Simply use the Replace function to change the bits you want to alter without worrying about the finer point of CSS programming.
Supposing you want blue text? Use Edit > Replace, and the following:
Find What: black
Replace with: blue
Select Replace All
Save layout.css
Alternatively to reduce the size of the main text:
Use Edit > Replace, and the following:
Find What: 16px
Replace with: 12px
Select Replace All
Edit > Save
One of the problems with this approach is that Word uses some symbols that don’t translate well into HTML. The commonest are quotation and the apostrophe. You may have had problems with this as well. Word can help with this as well.
To correct problems with quotation marks, open the web page in Word eg test2.html.
Select the content text, to restrict
changes to the text.
Use Edit > Replace, and the following:
Find What: ″
Replace with: "
Select Replace All
Edit > Save
To correct problems with apostrophes:
Select the content text
Use Edit > Replace, and the following:
Find What: ′
Replace with: '
Select Replace All
Edit > Save