Google Docs has implemented a much awaited feature, the full use of CSS in documents. This essentially means that those of you versed in CSS can create great looking documents instead of black, white and grey ones.

Color and some format options were already available of course, but you can now specify borders, you can add divs with styling, create different types of lists in seconds. Since all this is implemented in CSS, you can just specify different classes for different types of content and then encase the specific contents in divs.

This means you will format your document once, which will take you 10 minutes, and after that formatting a whole blog of text will only take about 2 sends. Considering you may want a border, a different font, a different background color and font color, and underline and so on, this is a huge productivity jump.

You can also edit the html, so essentially Google Docs has become a HTML editor with a WYSIWYG option. Tihs is awesome in my opinion, I now have full control over the visuals of my documents, making me much more likely to use Docs instead of Word for example.

Do you use some tool like Photoshop or an online color picker to choose your HTML colors? We use things like #ffffcc and #454545, who knows what these are and what they are doing here eh? Well as you will see hexadecimal is not that complicated at all, let’s take a look.

I bet many more of you know RGB notation, since the name says it all, Red, Green, Blue. The three numbers in an RGB value (ranging from 0 - 255) represent the intensity of these three colors, with 255 being the most intense. For example, (0, 0, 255) would be as blue as it gets, since red and green values are set to 0, while blue is set to 255.

Actually hexadecimal notation is exactly the same, with different ranges. If you group a hex value the same way as you do with RGB, for example #00 00 ff, you would get the same result as with the RGB(0, 0, 255). As you can see, hex ranges from 0 to f, with f being the most intense.

Knowing how these colors work enable you to change colors quickly on your website because you will roughly know what it will look like. If you want to get the exact same blue but in a lighter shade, you know you need to bump up all other values as well (to get it closer to white), for example #4455ff will be a lighter shade of blue.

As a side note, you can actually obtain the number of colors that your system can display with this information. Color values can go from 0 - 255, that means 256 colors overall for one channel. If you want all the combination of colors, use a bit of math and you will come up with 256 x 256 x 256 = 16, 777,212.

While I was updating the look of my blog I found Notepad++, a Windows notepad replacement one of the most useful tools ever. It gives you syntax highlighting for many programming languages, advanced search and replacement features, line collapsing, ftp down and uploading and so on, but if you just need a simple text editor it’s great as well.

I used it to be able to modify my blog template and php files without the need to upload then after each save. Another feature I found very helpful was automatic line collapsing. This means that it knows where a <div> element begins and ends for example (it also handles many other block elements), enabling me to just collapse lines I don’t need.

Using it to edit online files is also very simple. You need to configure the ftp client, but if you have your server details this should be a cinch. Once you have configured the client, you can connect to the server and access the files. They will be opened inside Notepad++ in a new tab and you can edit the contents. When you save the document it will be uploaded automatically, so you can see the changes immediately online.

First of all, find the icon (fifth from the right) which is labeled “show ftp folders”. Next, click the “open settings dialog” in the sidebar that just opened. You may also want to click the newly opened bottom window as well, this is for server messages and is only needed if you are an ftp whiz or if something goes wrong. So in the settings dialog, click new (at the bottom), type in a name and click rename. Edit the server details as needed, press ok, and you are ready to connect.

Just navigat through the folders as you would do normally, you can even perform folder actions. Double click on an item to open it, and when you save it, it will be uploaded automatically. Your productivity will increase by a lot using this app, no more downloading, renaming, renaming and other types of misery.

If some of you are into tweaking your sites and blogs you may dabble in CSS sometimes. If you want to be all productivity about it, I suggest you “learn” CSS shorthand. Not that there’s too much to learn, it’s just basically a way of writing less inside the file, to make it smaller, hence load faster, hence offer a better user experience.

A very common example is the way we designate margins. If you need an element to have a different margin on all sides, you would normally write:

margin-left: 5px;
margin-right: 10px;
margin-top: 4px;
margin-bottom:8px;

There’s a much-much shorter, more productive and organized way to go about writing all this down, called CSS shorthand. You can write all this in just one short line, like so:

margin: 4px 10px 8px 5px;

This short line will set all the attributes I wrote above, much simpler and productive right? You can also apply this to padding, borders and whatnot, in each case the first number will set the top of the element. The others follow clockwise, so top, right, bottom, left is the order. There is also an ever shorter notation if you have matching top-bottom and left-right values. In this case you could write:

margin: 6px 0;

This would give you top and bottom margins of 6px and left and right margins of 0px. Note that px is not needed for 0 values, you will even pass css validation.

While browsing through some info on official css specs and best practices, I came across a cool feature on the W3C homepage. They have a tool that lets you view four sites with eight different core stylesheets. You can also view the pages without styling, or you can take a look at just the style source.

If you are just learning css, this is a great way to take a look at a stylesheet that is definitely well formed and made in a web-friendly and compliant way. You can also use them to give your page a pretty good look right away, which you can tweak and tune as you like, or as you learn more and more.

Take a look at W3C core css styles on theW3C homepage