Cascading Style Sheets (CSS) gives you unprecedented control of the layout and design of any web document. As browser support only improves, we will see CSS becoming the primary styling system. This is partly because CSS is so light when compared to most JavaScript, AJAX, or image-based design systems. And as the support for more transitional features like sliders and gradients find their way into CSS, there may not be a need for anything but CSS in the near future.
The following collection is a one-stop-shop for CSS. From the official home page of W3C to gradients and button generators — each of these resources has been carefully reviewed and tested. With these tools, you can accomplish any CSS design task that you want using CSS as the primary, if not only, system for implementing the look and feel.
Let us know what you think and if there are resources available that should be on this list!
World Wide Web Consortium (W3C)
This is home base for CSS. The official CSS headquarters, World Wide Web Consortium W3C establishes web standards, and CSS is one of the standards they manage. While some browsers support CSS outside of the W3 standards, this site is where you go for authoritative information on CSS. They have excellent CSS training and a host of resources.
Google Webfonts
Web fonts are the way of the future for adding typography elements to your website. Google allows font designers to upload their fonts and they are completely free to use for commercial or personal use. Just add an @import sting to your CSS document and you can implement these quality fonts.
Ultimate CSS Gradient Generator
Finally, CSS-based gradients that work on ALL major browsers. Colorzilla put together this gem and it uses a combination of CSS3 and HTML5 to get consistent results across browsers. It even has support IE9, believe it or not. Just click the “IE” button to see how the gradient will look in IE to be sure it’s what you want. The gradient editor is fantastic and the code is easy to implement.
CSS3Gen
An excellent resource for generating quick snippets of CSS code for rounded corners, drop-shadows, and text shadows. These are great for call out boxes, forms, and side bars where you want to set information off from the rest of the content. The on-page tools are very simple and can easily be integrated into other features. Better yet, each tool has detailed explanations for how the CSS functions work in each browser. So this doubles as an easy-to-use tool and an excellent tool for troubleshooting why a browser may not be responding as expected.
Not Just a Grid
Not all grids function the same way. Some are fluid while others are fixed. Not Just a Grid came up with a system for serving the grid up based upon the available resolution of the screen, making it a hybrid. The system is fluid in that it works with the screen resolution, but once the page loads, the grid is fixed. The result is a clean layout every time.
960 Grid System
The 960 grid system is a fixed width approach with a simple premise: quit wasting time and just design. They only have a few grids, but they are easy to implement. Their customer list — which includes Sony Music, Drupal, Fedora, and many others — speaks for itself. Included in the free download are Photoshop, Fireworks, Gimp and other action/template files to create compliant designs. Then just splice and go!
Fluid 960 Grid System
Looking for a grid system that functions smoothly on all kinds of display widths? The Fluid 960 Grid System by Design Influences is a slick system for making sure your content is always in view. This is not ideal if you want a grid with a lot of graphics as the fluid nature of this system will push images around in an awkward manner. The site has a number of powerful tools available, such as image previews, accordians, and multiple grid sizes of 12 and 16 column designs. Fixed width systems are also available.
CSS Menu Maker
Cross-browser compatible, CSS-based drop-down menus are now possible. No JavaScript is required. The site offers fully customizeable menus of various types: drop-down, horizontal, and vertical. With tons of resources, this is a really great one-stop-shop for many other CSS development tools as well.
CSS Button Maker
Looking for an image-free button solution? CSS Button Maker by CSS-Tricks lets you quickly generate CSS only buttons that are cross-browser compatible. You can tweak the code later or use the stock code they provide. It doesn’t get any easier and the gradient tools are easy to use. Hover is supported so you can give users visual feedback. There is a WordPress drag and drop feature available as well.
Formee
Forms can be a real pain to code and get just right. If you’ve ever had a field go floating on you or had problems lining up text elements, you understand. Formee has a simple set of template forms that are compatible with the above 960 grid systems, so it will pop right into place. The code is well-documented and changes are easy to make.
What did we miss?
Any other CSS-based tools we should put on here? What are you using to get the job done?
Tara HornorTara Hornor has a degree in English and has found her niche writing about marketing, advertising, branding, graphic design, and desktop publishing. She is a Senior Editor for Creative Content Experts, a company that specializes in guest blogging and building backlinks. In addition to her writing career, Tara also enjoys spending time with her husband and two children.
