Creating a new Joomla theme can be a challanging task. A majority of the work when creating a new template is customizing / styling the overall theme layout and module styles via the template_css.css file.

We have put together a list of useful web design tools which may make your web design experience a little easier.

CSS Editing Tools

StyleMaster

Stylemaster is an excellent development tool for creating or editing CSS ( Cascading Style Sheets ) which will enable you to create a compliant XHTML and CSS web design. The software is not free but its worth the money

Some of the benifits include

editing the style sheet on the fly using a WYSIWYG editor

Preview mode so you can see the design take shape as you edit the css.

wizards and templates make it easy to create ready to go style sheets, navbars, breadcrumb trails, layouts and more

Lots of properties and selectors

Inbuilt validation and reporting tools

Basically its a pretty cool tool which is ideal for both novice and expert web designer and we would highly recommend this software to any thinking about creating your themes for Joomla. Also it is worth buying the CSS / XHTML tutorials they have developed. Think they are about $15 dollars each but this will provide you with a good grounding.

For more information can be found at Style Master Web Site.

TopStyle

Topstyle is another editor for creating standards-compliant designs You can edit your HTML, XHTML and CSS via a single interface. The also offers some cool features, including the option to upgrade your HTML documents by replacing outdated markup with equivalent styling. You can also convert HTML to XHTML and check your CSS syntax against multiple browsers, using a side-by-side preview. This is another good tool we would recommend if you want to start creating or editing CSS themes for Joomla.

For more information can be found at Newgator

CSS Page Layout Tools

CSS Creator Page Layout Generator

Do you want to create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer then visit CSS Creator Page Layout Generator Just enter the value you want in the form provided and thats it. The tools will then generate a layout for you which off course you can build upon but its a good starting point if you want to create your first Joomla theme.

layoutomatic

This is another cool tool for creating Cross-browser compatible CSS layouts with the option of  1, 2, or 3 columns. More information can be found at layoutomatic

CSS References

Its always good to have a point of reference when creating your new template_css.css file for Joomla themes and we would recommend the following web sites.

W3schools CSS reference

W3Schools' CSS2 reference chart is a good place to start as it includes a very ueful chart which lists the possible property, description, values, browser support. W3schools CSS reference

CSS Test site / reference point

This is another useful web site which offers CSS2 selectors, declarations, and a compatibility chart for Netscape 4.x and 6, IE 4, 5 and 6. CSS contents and browser compatibility

CSS Pocket Reference, 2nd Edition Book.

This book is great if you need a point of reference when CSS styling. CSS Pocket Reference (Pocket Reference (O'Reilly)

XHTML / CSS Validation tools

Once you have developed your first theme for Joomla now its time to validate it. To ensure your new themes validate visit W3C CSS Validation Tool web site and W3 Markup Validation Service

Colour Picker Tools

If you want to change the colors of your text, menu items or basically anything which is reference in the template_css.css file for your Joomla theme then checkout the tools noted below.

Pixie colour picker

This is great little utility plus its free. Basically download / install the software then all you need to do is hover over a colour you like and pixe will tell you the hex, RGB, HTML, CMYK and HSV values of that colour. Comes in handy.

Joomla CSS Guides

media 65 have created a useful guide to understanding the layout and CSS elements when creating themes for Joomla called joomla template kit visual css reference-1.0

Absalom Media have also developed another useful tutorial which is for Mambo but can also be applied to Joomla called Mambo CSS Tutorial.

Also look at the Joomla CSS reference document contained at Joomla Theme.