Arbenting’s Cliff’s Notes to css

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

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

Helveticss

Added Bytes CSS Cheat 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

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

CSS Elite

CSS Drive

CSS Vault

The Best Designs

CSS Flavor

More on CSS Galleries

Your Turn

Are there any ‘Notes’worthy CSS resources you feel we left out? Comment and let us know.

Share this Article:

  • RSS
  • Facebook
  • del.icio.us
  • StumbleUpon
  • Design Bump
  • Design Moo
  • The Web Blend
  • Design Float
  • ZaBox
  • Twitter
  • DZone
  • Digg

More From Arbenting:

19 Comments & Reactions

  1. June 24, 2009 at 10:42 pm | Permalink

    Some are new for me. I really need to visit them soon ;)
    Well done!
    Thank you for putting the notes together in a post.

  2. June 25, 2009 at 7:09 am | Permalink

    Thank you for the great resources!

Trackbacks/Pingbacks

  1. zabox.net
  2. Arbenting’s Cliff’s Notes to CSS
  3. Arbenting’s Cliff’s Notes to CSS | Design Newz
  4. CSS Brigit | Arbenting’s Cliff’s Notes to CSS
  5. Razvan Mihalcea
  6. Giographix Studios
  7. WPstudios
  8. MacDaddy Links of the Week | bkmacdaddy designs
  9. My Favorite Design Links of the Week | eGrace Creative Web Solutions
  10. Steve Webster
  11. Koko Hinson
  12. Lisa Ellwood
  13. Linserpelle Creative
  14. younes adil
  15. Deborah Woehr
  16. Angie Bowen

Leave a Reply

Get Free Updates

Subscribe via RSS

Subscribe via Email

Community News

Submit News