Smashing Magazine - we smash you with the information that will make your life easier. really.

What can be better than simple, useful and handy tools you can use “on the fly” in the development process? Whether you’d like to test font size, generate online-forms, create rollover-navigation, create a slide-show, format CSS code or optimize your code – you can use dozens of tools to make your life easier.

We’ve collected them. At least most of them, and compiled them in a brief and precise overview. And here what we’ve come out with – most useful CSS-Tools you can use developing tableless web-sites.
Links checked: May/14 2008.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

Fonts

• CSS Font and Text Style Wizard
  Use this wizard to experiment with font and text styles and generate sample CSS style source code.
• text sizing – up the garden path
  264 Screenshots
• Typetester
  Compare fonts for the screen

Forms

• Accessible Form Builder
  Generate XHTML-compliant accessible forms quicky and easily
• CSS Form Code Maker
  Generates ‘Colorful Box Layout’ For Forms
• JotForm
  Web Based WYSIWYG Form Builder

  

Layout

• CSS Creator
  Live CSS Cascading Style Sheet Layout generator for your web site
• CSS HTML PHP Website Template Maker
  This PHP – HTML – CSS template generator creates a two column layout with both a header and a footer….
• CSS Rounded Box Generator
  generates html and css for rounded corner boxes

  

• Firdamatic
  Firdamatic is an online tableless layout generator that allows you to create and customise layouts easily…
• Free CSS Template Code Generator
  Maker for 3 Column Layout (tableless)
• Page Maker – The Generator Form v2.90
  CSS Source Ordered Variable Border 1-3 Columned Page Maker
• QrONE CSS Designer
  Online CSS Generator
• Scriptomizers
  A CSS stylesheet generator

Navigation

• Colly’s CSS rollover generator
  CollyLogic CSS Multi-element Rollover Generator
• CSS Tab Designer
  CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
• Listamatic
  not a tool but very useful! – one list, many options – Using CSS and a simple list to create radically different list
• Listamatic2
  nested list options
• List-O-Matic
  Generate CSS-styled navigation menus based on list items
• List-O-Rama!
  Dreamweaver MX and UltraDev Zone – List-O-Rama will allow you to generate nice CSS inline menus in seconds
• CSS Menu Generator
  CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

Misc Tools

• CSS Love Child
  The Man in Blue Experiment – I want the body of Site [...] with the face of site [...]
• CSSVista
  CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously……
• HTML and CSS Table Border Style Wizard
  Use this wizard to experiment with table border styles and generate style source code.
• I Like Your Colors!
  Use this tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.
• Online CSS Scrollbar Color Changer
  Change the scrollbar colors in an HTML page
• S5Easy: Create S5 Slideshows Easy Online
  Create your slideshow in only 3 steps
• Spanky Corners
  ‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

Formatters and Optimizers

• CSS Compressor
  Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.
• CSS Formatierer und Optimierer
  CSS optimize
• CSSTidy
  CSSTidy is an opensource CSS parser and optimiser…..
• Clean CSS – Optmize and Format your CSS
  CSS Formatter and Optimiser, CSS Formatierer und Optimierer
• Format CSS Online
  Automatically format your CSS (cascading style sheets) so they are easy to read and edit.
• Icey CSS Compressor
  Removes everything useless from stylesheets.
• Online CSS Optimizer
  CSS Optimizer optimizes and reduces the file size of the Cascading Style Sheets
• Online CSS Optimiser/Optimizer
  This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go
• Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS
  This is a source code beautifier (source code formatter), similiar to indent
• Tabifier
  HTML and CSS code beautifier