How To Use CSS to Create Document Templates

Daniel Pataki 06-06-2008

CSS templatesI have been working on the web for a while now, and I have actually found it easier to write every document in HTML format instead of DOC or TXT. If you use Google Docs, you are actually doing the same, since Google Docs has (thankfully) essentially become a WYSIWYG HTML editor. Creating some document templates using HTML and CSS is very easy, can be done by everyone, and if you do it right, it will look the same to everyone.


Why use HTML?

My biggest reason for going for purely HTML and CSS documents is that it is probably the most compatible format across browsers and operating systems, except for the PDF format, which is very hard and/or expensive to do well. Using Microsoft Office is also not the best. I use Office 2007 which uses a lot of extra features not supported by earlier versions, so quality may be downgraded. Who knows what these docs will look like in Open Office for example? If you create a HTML document which looks exactly the same in Internet Explorer and Firefox you have created a document which can be opened by Mac, Linux and Windows users, and will look the same on 99% of the browsers.

What is CSS and HTML?

If you’re new to this whole HTML and CSS coding thing, don’t be alarmed. It’s very easy, and you can find plenty of resources on the web to help you. HTML and CSS code is what makes up most of what you see on this page here, HTML governs the content, while CSS governs the style or how the content is presented.

How can I create a template?

CSS style example

Well, you will need to study a bit of code. Thankfully, HTML and CSS is very easy to understand. To give an object a border for example, just type

border:1px black solid

. This will create a 1px wide black solid border. There are loads of formatting options you can look up and use, my suggestion is visualizing what you want, and then searching a bit to find how to do it. The most basic template would be an empty HTML file, take a look below.



Title of the page goes in here

<style type=”text/css”>

All your styling goes in here



The content of your page goes here.


You can then fill all this with content and styling to create your document. Take a look at example 1, example 2 and example 3 I made. Keep in mind that the code in the body, the content is exactly the same, I am only changing the css code. This shows that you can use the styling to create different looks quickly.


Why is this so great?

The reason this is so awesome is that you can create custom styles for yourself which may become a sort of “trademark” of your documents. You can cut and paste the CSS code and just think of the content once you’ve finalized it. Also, you can link in the stylesheet, so if you store docs online, you don’t have to include the CSS in the file itself. This means you can link different stylesheets for different occasions, and you don’t have to modify the document all the time.

CSS also enables quicker editing of documents style-wise. I prefer my documents to look good because I just feel better that way, and with CSS the process of formatting becomes much less of a burden. When you specify a heading style, it will be applied to all headings of that type. This means you don’t have to individually change the background color, font color, boldness and underline of a heading, you just specify it once.

Also, since Google Docs now has full CSS support, you can just copy paste your styling code into Docs and change the look of your documents without having to go around formatting every single heading one at a time.

Where can I learn more?

As I said, CSS is a simple tool, but it requires some basic knowledge nevertheless. HTML is similarly logical and easy to learn, I recommend W3Cschools for both of them. I learned a lot of what I know today there, for basic needs it is one of the best sites on the net. W3C also develops the web standards, so you can be sure that whatever they write on their page works.


Another page I used to learn a lot from was Your HTML Source. This page contains HTML and CSS, and also some advanced tips on coding, promotion, accessibility, and generally how to create a good website. It has great CSS help though, definitely worth a visit.

Finally you can take a look at some related blogs and articles like this awesome roundup of essential CSS techniques and 53 techniques you can’t live without.

Explore more about: Digital Document, HTML.

Whatsapp Pinterest

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pelaung Usaha
    July 13, 2009 at 3:40 am

    Thanks for the lesson, i want to elarn morea bout css, could i know the reliable source about it sir