HTML and CSS are the two most commonly used languages on the web. While it may not be the most advanced form of web development, every website made in the past decade uses both languages. Needless to say, there’s a lot to learn here, but that doesn’t mean tools can’t help. We’ve compiled a super list of super tools to take your markup from mediocre to macho.
As of now, HTML5 and CSS3 specifications are frequently changing. The markup you generate today may not work in tomorrow’s browser (but you’re generally pretty safe).
With all the browser-specific CSS3, it’s no doubt that anyone would get tired of having to essentially re-write a slightly modified line of code to accommodate just one browser. css3please takes care of this trouble by offering an incredibly easy way to generate proper markup to suit all browsers. This is a very good tool and every developer should be using it.
This is one more great CSS3 markup generator. It makes use of sliders and even a live preview area to generate cross-browser markup.
In a beautiful interface, generating rounded borders could not be easier.
With everything from dynamic gradients and shadows right around the corner, the internet is seeing less images being necessary to generate beautiful buttons. BonBon Buttons helps you with this in a gorgeous interface with just one goal in mind. It’s ease of use and absolutely stunning result make this by far one of the best button generators on the web today.
It can be cumbersome to have to manually input the direction, start, stop, and color codes to perfect that CSS3 gradient. A gradient with multiple stops and color changes? Believe me, it’s not the most fun thing to code and images aren’t easy to modify after they’re on the site. Luckily, Colorzilla has designed this super easy to use gradient generator for this purpose. It uses sliders and color pickers just like Photoshop and is highly recommended.
Another beautiful interface that helps set up that perfect font using CSS. Includes support for a handful of common fonts and allows you to adjust the font size, color, and advanced styling.
This superb little interface is easy to use and generates great CSS3 effects such as rounded borders and drop shadows. More options such as transforms, gradients, and outlines make this a very good web service with a very good approach.
I like to measure in pixels. But Ems work best across browsers, even mobile browsers, and should always be used for fonts. This web service is simple to use and does exactly what it says it does. It will instantly convert a font size you give it (such as pt or px), and, in return, give you the size in Ems, or vise versa.
Any web developer knows that the fewer HTTP requests, the better. One way to limit these requests is to combine common site images (usually icons) into one image called a “sprite”. CSS Sprite Generator makes this easy by asking for a zip of your images. Simply follow the steps and it will give you a perfectly-aligned, glyph image with an appropriate stylesheet. Much easier and faster than doing it by hand.
Well, your site looks just dandy. But the client wants a different color scheme. Go back and edit every single color code? Don’t even think about it. Simply upload your file to CSSColorEditor, and it will pull out each of the colors, arrange them in a list, and you can simply go down the list and adjust the colors that need adjusting. It gives back the properly modified CSS file.
Choose a grid system. Input the desired width, number of columns, and margin. Hit generate. No need to scour the web for download links or latest versions of grid frameworks; It’s all done right here.
Tell me: when was the last time you saw a paragraph that wasn’t a rectangle? Now I know some of you are going to say “just recently” and that’s because this web service exists and is so easy to use. Make your paragraph a circle or trapezoid — even a crazy curve shape — it’s incredibly easy using this exquisite tool.
“Find web type, grab CSS” is the slogan and it really is that easy. Browse through and find that perfect font, and hit ‘get CSS’. There is also an option to view what the font looks like on another platform (Win/Mac), and the beautiful interface makes it all the better.
Don’t open up an image editor just to find a color! This web service has a color picker and spits out a HEX code alongside the standard RGB. Great for choosing that quick color.
Who knew a simple list could have so many possibilities? Listamatic has more lists than you can care to count. Simply choose the one that fits your project and it gives you the HTML and CSS. (Really there are a lot of lists here)
This is a WYSIWYG layout editor. Based on the Blueprint framework, this is a GUI for a CSS layout. Let’s face it: coding a framework by hand is incredibly monotonous. With a very simple interface, you can add a container, and within it add columns. It generates the HTML and CSS at the click of a button. Making your own custom framework has never been easier.
This is one of the most lovely interfaces for sometimes not-so-lovely work. Create perfect tab-style navigation buttons in CSS3 using this beautiful service. With controls for everything from corner radius to orientation, it’s clear that doing this manually is a thing of the past.
With things like zen coding and SparkUp, it’s no doubt that web developers are expected to work much faster given the tools at hand. Instantblueprint has a plethora of options wrapped up in a gorgeous interface. It generates a valid HTML and CSS framework that can be used immediately in projects.
While not exactly a web service, this grid generator is a gorgeous example of great design. It generates a grid framework using simple options and even includes a preview page for you to make sure your grid looks perfect.
This is a beautifully designed, fully-featured, easy-to-use CSS prettifier. It allows file input via direct paste, file upload, or even URL. It’s plethora of options is perfect for a developer with sloppy code.
Much like ProCSSor, this web service accepts code via direct paste, file upload, or even URL. While it doesn’t have as many options as ProCSSor, it’s ease of use and clean interface makes it a great alternative.
Another fantastic CSS beautifier. Includes many options for compression or organization, and a smart backend. Designed with utility in mind, Code Beautifier has both a simple and advanced option set to accommodate both beginner and established developers alike.
Primer is another well-designed code cleanup utility. This is useful for developers who start coding their HTML with all the ids and classes they’ll need for later. Simply paste code into the box, click “Prime It”, and CSS Primer will pull out the ids and classes, and stick them into their own .css file, ready for development.
This back-to-basics CSS compressor does just that. It has a setting for compression level and accepts pasted code. Very simple to use, and very useful for optimizing code.
Another great option in the sea of code cleanup web services. Simply paste your code or feed it a URL, choose your compression type, select advanced options if necessary, and it will tidy up that code in a split.