Best CSS Tools

Layout

layout-o-matic

Layout-o-Matic a tool  which allows to select a layout type, width, and other options to the left, and then click Download or View and pick up your multi-column CSS layout starter kit (turning it into something unique and beautiful not included). You’re welcome to use the resulting generated layouts for any purpose, personal or commercial.

CSS Creator creates a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.


CSS HTML PHP Website Template Maker is a PHP/HTML/CSS template generator  that creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout. The resulting template is  a combination of several files i.e. this is a true PHP, html, CSS template that makes it easy to control multiply pages at a web site.

CSS Rounded Box Generator is a tool to generate HTML and CSS for rounded corner boxes.

Firdamatic is an online tableless layout generator that allows you to create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only .

Free CSS Template Code Generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look of an entire site.

Page Maker – The Generator Form v2.90 CSS Source Ordered Variable Border 1-3 Columned Page Maker

QrONE CSS Designer online CSS style editor.

Forms

jotform

JotForm is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others). Your new form will be created with the default fields on the selected form.

Accessible Form Builder makes it possible to generate XHTML-compliant accessible forms quicky and easily. Including the option of selecting what type of input you need.

CSS Form Code Maker is a HTML/CSS form generator  that creates a nice looking layout for forms. Add a ‘little color’ to the forms.

Fonts

typetester

Typetester is an online application for comparison of the fonts for the screen. Its’ primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

CSS Font and Text Style Wizard is brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

korhoen typeviewer – a css typeviewer. Choose font size, font family, font weight, font style, font variant, text transform, text-align, line-height word-spacing letter-spacing.

Navigation

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. With the CSS Tab Designer, you can quickly design your list visually, choose from a variety of styles/colors (60+ different designs/colors supported), generate strict XHTML compliant code.

Colly’s CSS rollover generator allows to create two distinct styles of rollover button, using CSS and just one image. You can optionally allow some background space above your image in which to place CSS- controlled rollover text.

CSS Menu Generator generates both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the effectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

List-O-Matic generates CSS-styled navigation menus based on list items.

List-O-Rama! allows you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish. The code is automatically generated and inserted in your page.

Formatters and Optimizers

csstweak

CSS Tweak enables you to optimize your CSS from your Mac’s desktop. The widget accepts CSS files dropped onto it. Once you drop a CSS file in, you are presented with tweaking options. You can choose to enable or disable any of the options, just the same as on the CSS Tweak website. Once you hit tweak, the CSS file is sent to the CSS Tweak server, tweaked, and then sent back and saved in the same location as your original file.

CSS Compressor is an utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality). In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

Tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements. JavaScript and PHP both fall into that latter category.

CSS Beautifier offers a variety of options, among them – Style Rule Settings, Style Property Settings, Alphabetizing Feature and De-Capitalization Feature.

CSS Formatierer und Optimierer is based on csstidy 1.3dev. The service is available in 4 languages : English, Deutsch, French, Chinese. It provides different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. It also allows to create a custom template the system will use to format the code. Note that your code should be well-formed. This is not a validator which points out errors in your CSS code.

Clean CSS is a tool to optimize and format your CSS. Note that your code should be well-formed. This isn’t a validator which points out errors in your CSS code.

Format CSS Online automatically formats your CSS (cascading style sheets) so they are easy to read and edit.

Online CSS Optimizer is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

Online CSS Optimiser/Optimizer is a tools which takes in a CSS file, and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. It removes comments, white space (such as excess spaces); converts RGB values to Hex, converts Hex values in the format #RRBBGG to #RGB; changes zero values with a size specified to 0, changes values such as border: 1px 2px 1px 2px; to border: 1px 2px; and more.

Color Tools

I Like Your Colors! is a tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.

CSS Color Chart This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palettes with either HTML or CSS. Click on the color code to select it, then you can copy and paste it. Click on the Toggle button to convert from Hex to RGB and back. The charts are printed in tabular fashion so you can narrow your browser window with the palette and compare the colors to your design side-by-side.

Online CSS Scrollbar Color Changer allows to change the color of your HTML scrollbars for Internet Explorer. Enter your colors in hex format, e.g. “FF0033″ or click the color chip for a popup color picker. The CSS for the scrollbars that you create is displayed automatically below. Copy it into your HTML page to easily change the scrollbars for your website.

Previous:

Next:

Leave a Reply

28 Responses to “Best CSS Tools”

  1. Joy, on November 19 at 10:38 am Said:

    Thanks for sharing these tools..^^..I will try some of them..^^..

  2. zorn, on November 19 at 12:21 pm Said:

    Fantastic, very cool. Working on learning CSS now, this is very helpful. :)

  3. PENIX, on November 19 at 5:29 pm Said:

    There are too many to try.

  4. Donald Sipe, on November 26 at 8:11 pm Said:

    The YUI Library has a great “Grid” builder that uses their solid CSS foundation. http://developer.yahoo.com/yui/grids/builder/

  5. krusty, on December 4 at 10:25 pm Said:

    Pretty cool, thanks!

  6. Forrest, on December 27 at 6:44 pm Said:

    This is amazing … a complete, well educated web designer in software form. Some of the navigations look really nice, but the typesetter tool is probably the most useful – for me – of the bunch.

  7. winterborne, on January 5 at 7:17 am Said:

    Blueprint CSS is a more lightweight CSS grid framework. There’s no GUI tool (the YUI has a rad GUI tool), but the class setup is so intuitive, you’ll be rolling in no time. http://code.google.com/p/blueprintcss/

  8. Sucker, on January 6 at 2:37 pm Said:

    Glad to find more CSS cleanup tools! :D

  9. fadern, on January 17 at 4:02 am Said:

    thanks

  10. nexenator, on March 29 at 9:29 am Said:

    Great list. One tool is missing though:
    iStylr.com – it lets you edit and create css designs within a great GUI and it even allows css-imports and exports (wordpress and other cms and shop systems)

  11. nexenator, on March 29 at 9:30 am Said:

    Forgot the url:
    http://istylr.com

  12. sumit, on April 17 at 1:03 pm Said:

    awesome
    thank you

  13. Jenny, on April 20 at 7:28 pm Said:

    these are great. thanks for sharing.

  14. Doc4, on July 16 at 5:09 pm Said:

    Would anyone here be interested in a CSS program that takes on features not offered above? I’m looking for some beta testers with a new piece of software. Beta Testers receive a free final copy in the end. If anyone is interested please send me an email.

    I’ve been going though several forums looking for thoughts on this project and I would love to hear from anyone. Here are some details:

    The proposed software has the following features:

    1. Headers:
    Provide text areas for developer information in an effort to quickly and easily add common information to a style sheet with automated commenting out. Such information may include the following:

    • Style Sheet Name
    • Style Sheet Description
    • Developer Name
    • Developer Web Site
    • Version Number
    • Last Update ( Automated )

    2. CSS Properties Re-Organization:
    Place property information in specific orders dictated by you, the developer. For the example below the developer would request three ( 3 ) spaces before each style property, and order the styles properties as ( width, height, margin, padding, background ). If you prefer to skip this step, styles will remain as the developer originally coded them. As an alternative a CSS property orgainzational standard can be implemented which is pre-programmed, using alphabetical or commonalities as a base. Commonalities ( width / height, margin / padding )

    #content {
    width: 100px;
    height: 100px;
    margin: 100px;
    padding: 100px;
    background: #333 url(images/myfile.jpg) 0 0 no-repeat;
    }

    Any and all optimization efforts are left out in an effort to avoid deletion of speciality hacks and custom code.

    3. Browser Hacks:
    Browser hacks are included with the re-organization. Placing them in the order desired by the developer or re-organized as a pre-programmed option. Additional Hacks can be included into the software through the Hack interface.

    4. Removal / Deletion of Unused Styles:
    Scan through all styles within a style sheet detecting and removing unused styles. This would be accomplished by the user providing FTP or local folder directory information directly from the desktop, thus allowing the software to search through all ( html or php ) files utilizing a particular style sheet.

    Thanks

  15. Rock Your Web, on July 24 at 5:36 am Said:

    Good job. Normally I used css style from dynamicdrive and cssdrive. Now I have more choice. Thanks.

  16. Nadia, on July 24 at 5:36 am Said:

    Tnx a lot, great listing! I like it… It’s perfect list for css tools.

  17. Albert, on August 29 at 10:24 am Said:

    Doc4, yes I’m interested in an css/html parser which would list unused styles, all styles used in a specific document, all styles with the files in which they are used…

    Basically, something which would help cleaning up after development.

  18. Steve, on October 13 at 8:41 am Said:

    Is there a tool for CSS that can link each CSS element from the CSS file to the actual HTML file.

    I mean, like a Java complier, it can map back each function to the function definition. I want to use the tool to see if I have elements in the CSS file that I no longer use in the HTML page anymore because of changes I made throught upgradign my page, in order to reduce the lenght of my CSS file?

  19. chandra sekhar, on January 6 at 1:33 am Said:

    fine article

  20. Jatupong Onlamai, on January 8 at 10:24 pm Said:

    What’s the great job? Your information is so useful for me. Thanks a lot.

  21. Web Design, on February 24 at 7:50 am Said:

    Really Nice Tools For CSS. It’s Good Tools. Thanks For Sharing list

  22. Web Design, on February 27 at 7:15 am Said:

    Really Nice Collection. Thanks for Sharing Tools

  23. Sujit, on March 25 at 10:18 am Said:

    Great list, might also want to add styleneat.com and lonniebest.com/FormatCSS/

  24. illegal3alien, on July 25 at 7:32 pm Said:

    really grate list mate btw you forgot about rapidcss right? or is it worst to compare these tools?? anyway this helps me lot

  25. heradas, on January 7 at 12:21 pm Said:

    pretty good, how about for a software version of it

  26. Soulice, on September 9 at 2:17 pm Said:

    Many of the template creators do not work, threy produce css that is not solid for FF and IE8. Noticed many of the copyrights on said pages are 4-6 years old. Otherwise, nice list.

  27. Shawn West, on November 1 at 1:58 pm Said:

    What a great list. I’m going to use some of these tools in my next project.

  28. Website Template, on April 18 at 1:44 am Said:

    This is really a great post a useful one..Thanks for taking time to share your great experience here with us ..Good job done keep it up..