Single pixel images
Single-pixel images, of both the transparent and coloured flavours, have a myriad of uses for getting your site to look just like you want it to. They're insultingly easy to make and utilise too.
This page was last updated on 2012-08-21
Future Watch:
Using single-pixel gifs is an old-school hack that allowed designers to lay out pages with greater accuracy. At the time (the 1990s), HTML and browser technology was not advanced enough for complex page layouts and pixel-perfect positioning to work. Nowadays, however, this can all be achieved quite easily through CSS, using padding and margins or positioning. Using the hacks below is really not necessary and you shouldn't do it.
How?
To create these images, you'll need just a basic image editor. I recommend Paintshop Pro (it's shareware), but anything you already have is probably acceptable, as long as it can save in the gif format. Just create an image with its height and width set to one, and background colour to whatever colour you want your blocks.
Once you have your image made, insert it into your page using the normal image tag stuff. It will look something like this: 
Yes. Now, you will do some manipulation using height and width attributes. With these you can stretch your image to whatever rectangle shape you want, and since it's all one colour, you get a nice flat block of pure colour.
Both the images above were generated by the same original image. The only thing you're restricted by are the colours, and you can just create a new, different-coloured image if needs be. The code for the top, big line is
<img src="hr.gif" width="300" height="7" alt="-----">
As you have seen, it is possible to have many instances of the same image on your page, but with each one looking different.
Why?
The idea of 1 by 1 images is that they load very, very quickly, with filesizes being only about 0.08kb. Just having that one coloured image in your repertoire allows you to create lines and large blocks of colour at will, and with very little cost in terms of bandwidth. These images are about as optimised as possible. The alternative to these are to create images of different dimensions for each size you want, but that's madness. They would look the exact same and would load much slower; plus, you'd have to download multiple different images instead of one for the whole page.
A coloured single-pixel gif makes a great alternative to a coloured <hr>, since coloured lines aren't supported by Netscape, and so go back to the default grey. Using a coloured image is a simple way to create coloured bars which fulfil the same purpose and work cross-browser.
Transparent images
Creating a transparent image is much the same process. It can be a single pixel too. You can use these images as spacers to lay out text as you want it. 
Say I wanted a 200 wide, 100 high empty block to the right there; it's just a matter of adding a transparent image with the right dimensions. They can be used to let your background show through, or to add clickable parts of your background (simply by positioning the image over a key part of your background image and making it a link).
sourcetip: Since you cannot see the transparent image, it can get tricky resizing it to the dimensions you want. Simply add in border="2" to the image so you can see its sides while you're designing.
Make sure you use the gif89a file format when saving your image, as that is the only one that can do transparency. If you don't see the option, just save as gif and you should be fine.
