
Smashing Magazine we smash you with the information that will make your life easier. really.
List of CSS Tools
By Smashing Editorial, September 2nd, 2006 in CSS | 141 Comments | Forum
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.
Fonts
- CSS Font and Text Style Wizard
Use this wizard to experiment with font and text styles and generate sample CSS style source code. - Em Calculator
Tool for calculating pixel font sizes to ems.
- korhoen typeviewer
css typeviewer - 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 - Webucator
A CSS reference that allows you to test your CSS code.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Stay in touch
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 75 JavaScript Techniques
- 70 Best Photoshop Tutorials
- 70 Best Illustrator Tutorials
- 53 CSS Techniques
- 50 Blog Designs
- 50 Graffiti Artworks
- 50 Brilliant Photos
- 50 Movie Posters
- 40 Free Fonts
- 40 Creative Layouts
- 35 Beautiful Icon Sets
- Beautiful Desktop Wallpapers
- Beautiful Macro Photos
- Beautiful Underwater Photos
- Free Design Templates
- Free CSS Layouts
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- AJAX Tutorials
- Badges and Pins
- Batch Image Processing
- Black & White Photography
- Block Quotes
- Blog Designs 1, 2, 3, 4, 5
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Clean Code
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- Drupal
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Font Management
- Form Design Patterns
- Forums
- Fractals
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graffiti
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- JavaScript Techniques
- jQuery
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Macro Photography
- Mascots
- Moleskine Art
- Motion Graphics
- Motion Blur Photos
- Movie Posters
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Actions
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Pricing Tables
- Product Designs
- Rain Photography
- RSS Best Design Practices
- RSS Feed Icons
- Screencasting
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Smoke Photography
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase 1 2, 3
- Underwater Photography
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Version Control Systems
- Vintage & Retro Posters
- Vintage & Retro Designs
- Vintage & Retro Tutorials
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Weblog Engines
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- Wordpress Toolbox
- WYSIWYG Editors
Fresh Bookmarks
22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.
10 New PHP Content Management Systems
All based on PHP.
25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.
Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.
20+ CSS Data Visualization Techniques
Get inspired.
CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.
Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,
Webdesign: Five Minute Upgrade
Making Your Design Pop.
45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.
The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.
Blogroll
- Bittbox
- CatsWhoCode
- Colorburned
- Design Disease
- Designm.ag
- Deziner Folio
- Dr. Web Magazin (.de)
- Dr. Web Shop (.de)
- Freshome Blog
- FudgeGraphics
- I Love Typography
- MakeUseOf.com
- Naldzgraphics
- Noupe.com
- Pro Blog Design
- Search-This
- Six Revisions
- SmileyCat
- Spoon Graphics
- Typesites
- Usability Post
- Walyou
- Webdesigner Depot
- Weburbanist
- Wellmedicated










Sam W (October 9th, 2006, 5:55 pm)
This opitimiser collects all your inline styles and creates classes for them then compresses them.
Peace,
Sam
BlockStop (October 20th, 2006, 8:06 pm)
Very nice! These tools are very handy!
Ivan Minic (October 20th, 2006, 8:12 pm)
Wow…. brilliant list!
Keith (October 20th, 2006, 8:35 pm)
Excellent compilation of CSS tools. I’ve never an expert in CSS, but these will definitely help Link [www.neohide.com].
Keyne (October 21st, 2006, 5:29 am)
Nice collection, thx!!!
Constantin (October 21st, 2006, 11:14 am)
A good link to add, very helpful:
free standards-friendly layouts: Link [andreasviklund.com]
go check, it should be on your list. :)
Dave (October 21st, 2006, 3:40 pm)
oh, sweet. now, if i could just get them to help me fix my site
dean (October 22nd, 2006, 5:22 pm)
Very very helpful for me, thank you very much
Suraj (October 24th, 2006, 11:07 pm)
WoW is all I can say. Thanks for these resources!
borat (January 5th, 2007, 5:25 pm)
plzz add my link, its a nice php webbased css-editor.
Chin Yong (January 24th, 2007, 12:03 am)
This list is god-given. Really sweet and can really help a lot of developers out there.
Alison the Franchise Queen (February 9th, 2007, 8:41 pm)
Help!! These tools are great, but I need to know how to adapt the CSS on my site so that it is printer friendly. I particularly need to how how I handle pages with different content heights and get them to break at the right place. The main issue is to adapt the CSS so as not cut of words in the left hand margin. Can anyone point me in the right direction? Alison
Mark Priestap (April 23rd, 2007, 10:33 am)
Thanks for the list!
What about wufoo.com?
Ece (June 16th, 2007, 3:21 am)
Just a kid in a candy store aren’t you Barry
lumonata - bali web designer (July 31st, 2007, 5:40 pm)
thank you for all of your article in this site. its very helpfull for me as a newbee.
Nishanthe (August 9th, 2007, 5:57 pm)
Thank you for the useful list.
-Nish
Fahid (August 23rd, 2007, 1:46 pm)
Thanks for this handy tools……
very helpful…….
Matt M (October 2nd, 2007, 11:03 am)
I like to post my CSS tool as well, if anyone is interested:
Link [hackd.wordpress.com]
You can copy and paste CSS code, and it will visually display to you the results of the colors.
Alison (October 18th, 2007, 5:53 pm)
Thanks for these useful links to the CSS tools! I’ve used several of them now and I have to say that the Layout-o-matic is without a doubt a fave.
Thanks again.
Andres (December 7th, 2007, 2:49 am)
Maybe you should include this in your list: Link [www.cssbuttons.net]
CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.
Todd Loss (December 28th, 2007, 11:13 am)
this is a great list, thankyou very much for the article
Jeff Adams (January 2nd, 2008, 1:09 pm)
awesome article, tools are massivley handy thanks very much Smashing Magazine!!!
uzamax (January 17th, 2008, 4:54 pm)
CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual…
chris Larson (March 10th, 2008, 11:41 am)
Sweet list thanks. I’ve used a few of these sites. I posted your list on Link [listdid.com]
adria (March 31st, 2008, 8:12 am)
This list is amazing and so useful! Thanks so much! Does anyone know of a similar list of tools/tips for developers (especially PHP)?
kunter (April 15th, 2008, 10:28 pm)
and so is why this site is second to none. best regards
Gazebo - Music Videos India (April 19th, 2008, 8:54 pm)
Thanks GR8 list, I want to ask a question about color options in a website I want to put 3 color options for my website i.e. 1 will be default color, and 2 colors of choices I want to put 3 buttons ( with 3 different colors - Red, Green, Grey ) in my website , when on clicked 1st button it will show the website in Red color and when I click 2nd button It will change the color of the whole website from Red to Green and same process for third button.
Thanks
sezer (August 10th, 2008, 3:49 am)
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — Link [css-lessons.ucoz.com]
Jens Meiert (August 19th, 2008, 3:35 am)
Oh, I hope I may point out that Link [uitest.com] features yet additional tools, not just related to CSS.
rap dinle (September 29th, 2008, 2:00 pm)
C marrant. Je suis tombé sur le site par hasard et j’ai me rendre compte de se qui m’attends en Inde. J’y vais dans 4 mois. Je suis vraiment impatient. Belles Photos, beaux “reportages”. Cool
Neel (November 26th, 2008, 9:37 am)
Very useful stuff, I appreciate ur hard work. I am basically looking for navigation with submenus in it. Can you list an example of that sort. thanks
Dane (December 21st, 2008, 12:14 pm)
I am now a regular reader of this site…Thanks!
ForumKD (December 29th, 2008, 2:32 pm)
very very thanx…
Jamiel Sharief (January 31st, 2009, 4:40 am)
Thanks for putting together this list, its great. Keep up the good work.
car jacks (March 14th, 2009, 4:32 am)
It’s the first time I comment here and I must say you share genuine, and quality information for bloggers! Good job.
p.s. You have an awesome template . Where have you got it from?
investor (March 18th, 2009, 1:17 am)
This is a very comprehensive list, thank you!
arravorne (March 30th, 2009, 2:33 pm)
Ммм, где ещё можно такие творения прочесть?
Michal Zigo (April 6th, 2009, 2:20 am)
Very nice. Thanks!
Frato (April 22nd, 2009, 8:34 am)
YASC (Yet Another Sprite Creator), an easy tool to generate your css rules for your sprite images : Link [www.lecentre.net]
cnsk (May 29th, 2009, 12:55 am)
Good oneLink [www.winnou.com]
Servis (June 9th, 2009, 3:32 am)
Some great advice there, excellent post