Following our new series dedicated to designers, we wanted to delve into the developer’s side of the pool to take a quick and dirty look at a tool of the developing trade, Cascading Style Sheets or as it is more commonly known, CSS. This widely accepted standard for adding style to web documents, has simplified the overall formatting process for web developers since it came onto the scene. By moving a majority of the presentational attributes into a single style sheet and allowing for lighter HTML coding, CSS won over the hearts and minds of most developers working in the field and the enthusiasm for this time-saving tool has not seemed to wane.
So we put together a Cliff’s Notes guide of sorts to this coding champion that will hopefully prove useful to both beginner and seasoned coder alike. Below are several categories to help you with all of your CSS needs, from education to galleries, with related sites linked up and a light list of related articles that comprehensively cover the topics at hand. As with a lot of topics this involved and in-depth, it is easy for one to get in over their heads, and lose sight of the important track they were on. This is our attempt to help streamline that effort a bit. Hope it helps.
Learn CSS
CSS Basics — 18 chapters on CSS basics that can be read online, downloaded or printed. A great place for an absolute beginner to start.
The Complete CSS Guide is a reference to every aspect of cascading style sheets. If you need help learning CSS or if you’re looking for info about selectors, properties and all the other aspects of cascading style sheets, this is the place.
More on Learning CSS
- 20 Websites To Help You Learn and Master CSS
- Top 5 Sites to Learn CSS Online
- 70 Expert Ideas For Better CSS Coding
Websites
CSS Play provides experimental CSS demonstrations that use no javascript or any other programming language.
Css Globe is a community news site where members can publish news about web standards, css, web design and web development.
CSS Zen Garden — is a demonstration of what can be accomplished visually through CSS-based design.
CSS Tricks is a great CSS community run by Chris Coyier featuring a blog with some of the best CSS articles I’ve come across, forums, screencasts and downloads.
Eric Meyer: CSS Considered by most to be the ultimate CSS guru, Eric Meyer’s CSS site is a must read for any web developer.
Cheat Sheets
Leslie Franke’s Single Page Cheet Sheet
Interactive CSS Box Model Demo
Frameworks
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Blueprint CSS 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.
Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project.
Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.
CSS Tinderbox is geared towards supporting CSS-based web design by providing basic, open source frameworks that people can use as a starting point for their own templates. The framework can be used as a head start instead of starting everything from scratch again and again.
More on Frameworks
- Top 12 CSS Frameworks and How to Understand Them
- CSS Frameworks + CSS Reset: Design From Scratch
- Definitive List of CSS Frameworks — Pick Your Style
- 5 Popular CSS Frameworks + Tutorials, Tools and Getting Started
Tools
CSS Typeset allows you to interact with web type, see your changes in real time and get the CSS code for the finished product.
PXtoEM is a simple px to em conversion tool.
CSS Optimizer is an online tool based on CSSTidy which cleans up and compresses your code.
CSS Redundancy Checker finds CSS selectors that aren’t used by any of your HTML files and may be redundant.
CSS Color Editor allows you to change the entire color scheme of your website without manually going through your css code. I haven’t tried this tool yet but I’ll admit I have a few doubts about how well it would work. If anyone has used it please comment and let us know your experiences with it.
CSS Galleries
More on CSS Galleries
Your Turn
Are there any ‘Notes’worthy CSS resources you feel we left out? Comment and let us know.
Loading...
Some are new for me. I really need to visit them soon ;)
Well done!
Thank you for putting the notes together in a post.
Thank you for the great resources!
No problem guys, I’m glad you found some useful resources :)