Here at Imulus we recently set a goal to streamline our design and development process by creating templates for starting a new project. As a first step in this process I coded out a simple HTML / CSS example page that offers information on basic HTML elements and what CSS can do to them.

It contains visual examples for the following:

• font rendering (PC and Mac)
• link styling
• heading styling
• list styling
• border style options
• and table styling

You can download this cheat sheet in zip format or view it online. Enjoy!

For the past few years I have been using the Firefox Web Developer toolbar to help me pin down problems and bugs when developing websites. It has been and continues to be a great tool. However, recently one of my buddies turned me on to a new utility that works in Safari and Firefox and offers some additional functionality. It’s called XRay and is a CSS / HTML structure discovery tool.

Basically to install XRay all you have to do is drag the XRay link from http://www.westciv.com/xray/ to your bookmark bar. From there you can open it up on any website and quickly find out information about the page structure by clicking on various elements of the site. It will tell you div id names, widths, heights, margins, paddings, parent elements, inheritance information, etc. All of this information is nicely highlighted in a lightweight inspector.

While XRay doesn’t overtake the Firefox Developer Toolbar, it does offer some functionality that compliments it nicely. And considering it’s free and super easy to install I strongly recommend checking it out.