Design RushWeb design resources and tutorials

Thanks to modern web standards, it’s possible for web designers to achieve the exact look they want for a website with the help of CSS. Although CSS is an extremely flexible language, it can be somewhat tedious to hand code from scratch. While most designers will still choose to manually write a lot of their own CSS, there are some great free tools that can help you become more efficient when you are coding CSS. Below are five CSS tools that I not only think are quite useful, but that are also all free:

CSS Compressor: If you have a large CSS file, you can use the CSS Compressor file to quickly reduce the size of your file. By reducing the size of a CSS file, you will not only increase the loading speed of the website it is associated with, but also save on bandwidth. CSS Compressor allows you to choose between light, normal and super compact compressions. There are also multiple options for how to handle comments in the file.

CSS Font and Text Style Wizard: This free online tool allows you to experiment with different text and font styles. The CSS Font and Text Style Wizard allows you to customize the following options: font-family, font-style, font-variant, font-weight, font-size, line-height, word-spacing, letter-spacing, text-decoration, text-transform, text-align and text-indent. Each time that you make a change to your selection, the sample text on the page will automatically update to reflect your new customization. If you find a font and text style combination that you like, you can directly copy the CSS and HTML source code for that combination and use it in your own project.

I Like Your Colors: If you come across a website with a color scheme you like, you can use the I Like Your Colors tool to extract the color scheme from that website. All you have to do is copy the website’s URL and paste it into the I Like Your Colors form (which is located at the bottom of the page). The tool will then return the hex code for each color that is being used.

Accessible Form Builder: This tool allows you to build forms using a CSS layout or a table layout (most designers will probably choose to use the CSS layout option). Simply select which style of form you want to build, and then you will be taken to a page where you can enter each input field you want your form to use. Once you enter all of your inputs, the tool will generate the source code, which you can copy and paste into your website.

prettyprinter.de: If you need to format your source code (for example, to print it out for reference), this tool will save you a lot of time! Simply paste your code into the tool, choose which of the twelve options you want the tool to apply, and your code will be formatted into a clean, printable version.