CSS are one of the most important technologies on the web today. They give web developers the power to style their web sites so those sites are usable, compact, good looking, consistently displayable, and quick and efficient to change if so desired. But writing the CSS code from scratch for each web design project is a tiring and time-consuming job. So here are 60 Best CSS tools ranging from layout generators, form generators to code compressors that will save you a lot of time writing the CSS code for your next css web development.
Typography
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.
Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.
PXtoEM.com is px to em conversion made simple. Choose your body font size in pixels (px)and out comes a complete pixel (px) to em conversion table, making elastic web design with CSS a snap.
“What the Font?!” is a great tool that can help identify fonts. Just upload an image or enter an image URL and let “What the Font?!” do the rest, telling you what font is being used.
BitFontMaker is a dead simple pixel font creator that allows you to create your own true type fonts online. You can either create a font from scratch or import and edit an existing one. The site provides you with an easy to use pixel editor that is used to make text font characters individually with an option to preview them along the way.
sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.
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.
myFontbook is a nifty new tool for viewing your font collection from your web browser.
Easy to use CSS3 @font-face generator from Font Squirrel.
Frameworks
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
Check out tutorial here
A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
The 960 Grid System is a very light-weight CSS grid framework for constructing your web content based on a grid comprised of a fixed number of columns within a fixed 960px wide layout. There are various column options available but the two most popular are the 12 column and 16 column variants. The 12 column layout consists of 12 column grid has 12 available columns each of 60px width, with a 10px gutter on each side. The 16 column version consists of 16 columns of 40px, again with a 10px gutter on each side.
Check out tutorials here, here, and there
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.
Check out tutorial here
“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
Check out Documentation
The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.
52Framework
The framework from the future, HTML5 and CSS3 framework that supports all browsers used today!
The happy & awesome way to build fluid grid based websites.
CSS & CSS3 Generator
Simple tool that will generate CSS frame out of your XHTML structure.
Ultimate CSS Gradient Generator
You’ll need a recent version of Firefox, Chrome or Safari to use this Gradient Generator. The resulting CSS gradients are cross-browser – they will work in these browsers and will also fall back to a simpler gradient in Internet Explorer.
List-O-Matic is a tool that makes the process of creating list-based, CSS-styled navigation just that little bit easier. Try it out below or read the ‘About’ section at the end of the page if you want to know more.
Generator and Download CSS Menus
Online tool that can simply add style to your text.
Create accessible form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
First Web Based WYSIWYG Form Builder. Create and publish web forms using your browser.
The grid system generator will create custom grid systems in valid css / xhtml for rapid prototyping, development and production environments.
Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.
Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.
CSS Button Generator rapidly create CSS buttons for your website.
CSS Layout Generator
The generator helps you create the structure of your website template using valid HTML and CSS.
The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.
Generates fixed and scalable grid layouts along with basic reset and typography.
CSS3 Generator is a quick way to discover how to achieve certain functions. A single drop-down menu gives you access to border radius, box shadow, text shadow, RGBA, @FontFace, multiple columns, box resize, box sizing, outline and selectors. Select any of these functions and you’ll be presented with a few options; fill those in and you’ll have your code. Fill in the form and CSS3 Generator will output code for you.
Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3). You’ll need Safari 4 or a webkit nightly to see the gradients in action, or Firefox 3.6
CSS3, Please! lets you play with fancy new rules such as : border-radius, box shadow, gradients, rgba support in backgrounds, transforms, font-face.
CSS Sprites
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use!
SmartSprites will let you easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.
Css-sprite.es is an online CSS Sprites Builder / Generator written by Nicolas Crovatti. This tool can, given a few image files, generate a clean image sprite with corresponding valid CSS and XHTML code along with an optional hover processing for rollover effects.
The awesome, wonderous, fantastic, automagical navigation generation tool by Engage Interactive!
Optimization & Formatting
Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!
The W3C CSS Validation Service
Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets
This service has been provided to allow you to check the validity of your CSS against the W3C’s validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.
Safely reduce the filesize of your css files online
CSS Sorter helps you to sort Cascading Style Rules (CSS) alphabetically.
Advanced CSS Prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.
CSS Editor
JustStyle CSS Editor is full-featured, yet easy-to-use, software for webmasters. It is a specialized style sheets development environment, featuring everything needed to develop and deploy cascade style sheets.
Astyle CSS editor is absolutely FREE software product.
To help you work with CSS, they have created a free tool called Simple CSS, which runs on Mac OS X and Windows. Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.
The CSS Stylesheet Editor provides an easy method for creating and modifying CSS stylesheets for use with your HTML documents, without the need for knowledge of the CSS syntax. It provides intuitive fields for all of the CSS properties you’re ever likely to need:
CSSDesk is a online HTML/CSS sandbox. Experiment with CSS, see the results live, and share your code with others.
Cross Browser Compatibility
Adobe Browserlab is a web hosted service which allows designers to test designs on multiple browsers and operating systems. In this system are included a zoom function and measurement tools like rulers and guides, and the ability to move quickly to specific areas of a screenshot. Browser sets allow designers to customize, edit, and save a combination of browsers to test.
Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated servers for your review.
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL in the field above and try it out – it’s free!
Firefox Add-Ons
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
Powerful and user-friendly selector utility for selecting elements and doing various actions on them. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), for making the page more readable, and (most appreciated by web developers), for analyzing the structure of a page.
Developer website
GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.
Font Finder
FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.
The Web Developer extension adds various web developer tools to a browser.
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
