50+ Online CSS Tools for Web Developers and Designers

For web developers and designers CSS is like a second native language.

If your not mastering it you’re not able to do what is expected by customers and it will be a to time consuming and frustrating process to place all the page elements in the right spot. In the process of improving CSS skills or simply looking for ways to be more effective tools is always welcome.

In this post tripwire magazine provides a wide range of different tools for speeding up and making your work with CSS easier. You might also like these posts:

• 40 Must Have Cheat Sheets for effective Web Designers
• 25+ Tools, Cheat Sheets and Inspiration for Designers working with Color Themes

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

CSS Tools

Telerik Visual Style Builder

An online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This visual style builder eliminates any need to have working knowledge of the front-end HTML and CSS structure of the RadControls to create custom skins.You’ll have complete control over the elements of the RadControls’ skin and allows you to develop a custom built skin in very short time.

This tool is ideal for ASP.NET developers. Probably one of the easiest ways to create a RadControls skin. This tool also satisfies your need for ready made menus and images for calendars and such.

MoreCSS

An easy to use, lightweight and fast JavaScript toolkit / library with CSS syntax for common things. It allows you to effectively write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. The only requirement this tool has is the use of regular and simple CSS.

YAML

This builder is designed for quick and effective development of CSS layouts, that are based on YAML. Yet Another Multicolumn Layout is a highly versatile (X)HTML/CSS framework, produced under the Creative Commons Attribution 2.0 License. Creating neat layouts is easier then you think with YAML Builder. This truly is one tool worth your time.

Drawter

Beta 2 written in JavaScript and based on the jQuery library enables you with the possibility to draw your website’s code. Every tag is presented as a layer you have drawn.It can run on every single web-browser which makes it really useful and versatile.

Working knowledge of HTML and CSS is required in order to utilize Drawter, however developing code is easier then writting by hand. Drawter anticipates a version where you will not need much knowledge of CSS and HTML, this is foreseen in the near future.

CSS Type Set

Ahands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content. You’ll be able to test different font-styles throughout a piece of text and also allows you to select a font-style and easily copy/paste into your stylesheet.

css-generator

This tools lets you input your XHTML code in a box displayed on the front page, the code will be sent back to them and they will return your code with a corresponding CSS frame. This service is completely free This is great for the developer that’s big on multi-tasking.

Grid Designer

Asimple and basic tool that will help you create solid layouts. This tool will enable you to set columns, typography and export the HTML and CSS code. You even have the option of bookmarking every design in order to come back and edit it at a later time.

Deploy

“Whenever starting a web project, I used to always begin with the tedious process of creating the basic framework structure for the site. This included creating folders for CSS and images, downloading and including jQuery, and adding a CSS reset, among other things. I’ve been trying to figure out a way to somewhat automate this process, and now I’ve found it in the form of Project Deploy“. This is a free open-source Web application that allows designers to select the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. With current versions you can utilize this tool for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites. Deploy saves time and organizes your codes parent folders and more.

Blueprint Grid CSS Generator

Will help you generate various flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Doesn’t matter if you prefer 8, 10,16 or 24 columns in your design, this tool now enables you that flexibility with Blueprint. This generator allows you to cut down on your development time and build your site on an easy to utilize grid.

JS Bin

AWeb application that’s specially designed to aid JavaScript and CSS developers to test snippets of code in a specific context and debug the code collaboratively. In other words, it’s collaborative JavaScript debugging at your fingertips. You can also edit and test JavaScript and HTML as well. To finalize, you can save and send the URL to a colleague for review or help. They may make any needed changes if you allow them to.

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.

I Like Your Colors!

A tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.

CSSFly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

Time Saving CSSEdit Tips

CSSEdit is another fantastic web dev app, which takes Apple’s WebKit by the reigns to deliver a fantastic real-time visual CSS editing experience. But that’s just it! People only know it as a visual CSS editor, when it is actually much more! I use these 5 fantastic tips to keep my work flow fast and smooth.

Accessible Form Builder

List-O-Matic

List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus. Just give it a go – it’s child’s play!

Markup Maker

Markup Maker takes a simple list of page ids that you enter and converts it to a valid XHTML/HTML document (scaffolding, if you like). Now includes HTML5 support

CSS Colors Palette Generator

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 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.

CSS Mate

CSS Mate is an online CSS editor.

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

CSS Rounded Box Generator

A tool to generate HTML and CSS for rounded corner boxes.

Online CSS style editor.

CSS HTML PHP Website Template Maker

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.

Page Maker – The Generator Form

CSS Source Ordered Variable Border 1-3 Columned Page Maker

Firdamatic

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.

CSS Form Code Make

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

CSS Code Cleaner Tools

Format CSS

With Format CSS, you’re able to paste in your CSS code and select from the options available to achieve code formatting the way you want. This is great for developers who just code with no structure but at the same time want to deliver nicely formatted code to customers.  You can easily convert a compact CSS code into readable form with proper line-breaks and indentation or vice-versa. Use this tool for quick code organizing and the production of clean code.

Clean CSS

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.

Styleneat

This tool can really make your come more neat!

CSS Compressor

Use this 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

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

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.

Postable

“I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

Page Layouts

Nice and Free CSS Templates

This site contains free css templates for your website – Just copy and paste and there you have a stunning website !

Even more great layouts

If 53 fixed layouts were not enough here are some more both fixed and stretched layouts for ultimate flexibility. These 40 layouts are again completely CSS styled without any tables.

Fixed Length CSS Layouts

42 free fixed length layouts ready for use

CSS and HTML Cheat Sheets

There’s a lot of cheat sheets available for CSS, html and any other web technology. I have picked a few that I believe stand out because they are able to assist you remebering important elements of key web technologies or because they are really well structured.

Print out your favorite Cheat Sheet and put it on the wall just next to your monitor to get instant access to help and reference.

CSS2 Cheat Sheet

This cheat sheet is designed to not only be a quick reference for CSS properties but also to give you a good feel for how each property should be used. It contains all of the properties in the CSS2 specification including a description of the syntax of each one. There are also sections that describe selectors, pseudo-elements and pseudo-classes, @ rules, and colors.

Gosquared CSS help sheets

Good looking and well structured CSS overview

addedbytes CSS2 Cheat Sheet

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

Core css

All you need to know about CSS in 3 parts. These documents go through all important aspects of CSS on a minimum number of pages.

CSS Shorthand Cheat Sheet

Get help with some of the CSS elements that are so easy to forget.

CSS2 – Quick Reference Guide – PDF

XHTML 1.1 Cheat Sheet

This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.

Gosquared html help sheets

Good looking and well structured html overview

HTML Cheat Sheet

The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. PDF PNG

HTML5 Canvas Cheat Sheet

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

HTML Character Entities Cheat Sheet

The HTML Character Entities cheat sheet is designed to act as a reference sheet, listing the various character codes in HTML. PDF PNG

HTML Character Entities Cheat Sheet

This cheat sheet contains a list of all of the HTML 4 character entities including ISO 8859-1 (Latin-1) entities. The characters are organized into 8 groups: Latin characters, Greek characters, numbers, puncutation and miscellaneous symbols, mathematical symbols, currency symbols, arrows and shapes, and spacing symbols.

Each character contains a unicode entity reference (e.g. &#160) as well as a named entity reference (e.g. &nbsp;) where available.

HTML Colors Cheat Sheet

This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).

RGB Hex Colour Chart

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called “web safe” or “non-dithering” colours (there are actually only 22 web safe colours, but those are revolting).

CSS Colors Palette Generator

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 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.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.