I 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.
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.
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.
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.
<html>
<head>
<title>
Title of the page goes in here
</title>
<style type=”text/css”>
All your styling goes in here
</style>
</head>
<body>
The content of your page goes here.
</body>
</html>
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.
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.
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.
(By) Daniel likes Ice Tea, please send him some! You can take a look at his tech blog Hack Your Day, or order some blog modifications from his Blogtastique service, perhaps in exchange for Ice Tea.
Enjoyed this article? Subscribe to MakeUseOf and get daily updates about new cool websites and programs in your email for free. Plus get free cheat sheets to your favorite programs.
Filed Under: How-To
Tags: css, documents, How-To, html, templates
