CSS Tools

Oh the joys of CSS. Take this simple layout for example. I won't admit to how many versions and hours I dumped into it. And in the end I went back to a simple design so you never know. My only goal here is to share as much CSS goodness as possible to make not only my life but your life easier too by listing some of the best resources I have found. I'm always learning new things even after being in this business since 95.

ALSO see my CSS Examples Page!

CSS 3

• CSS 3 Intro
  A pretty good introduction to CSS 3.
• CSS Properties Compare Chart A continuously updated list of all CSS properties and their coresponding CSS level.
  
• CSS 3 Cheat Sheet
  A fairly good CSS 3 Cheat Sheet
• CSS3 Gradient Generator v2.0
  With the release of Firefox 3.6b Mozilla introduced support for CSS based gradients.
• CSS3 Generator
  Just check it out, its awesome. Border Radius, Box Shadow, Text Shadow, Gradient, to name a few...
• W3School CSS2 Reference
  Lists all the CSS2 property with great examples and notes on each.
• Box Model
  A must read for anyone getting into CSS. Also see the Basic CSS Box Model Demo.
• CSS Shorthand
  Guide to shorthand CSS
• CSS Easy
  Learn CSS the modern way.
• Amazing CSS 3 Column Layout
  The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.
  
  
  
  Also see a huge list of 3 column layouts.
• Taming Lists
  A great review of lists and CSS from Alistapart.com.
• Specificity Wars (Very helpful and fun)
  
• Absolutely Relative
  The concepts of absolute and relative positioning in CSS can be quite confusing and are often misunderstood. This article helps make sense of it all.
• CSS Background Images
  A great tutorial on setting background images using CSS.
• Vertically Alignment Using CSS
  Some good insight into the chalenges of vertical alignment using CSS. Example. Here is another site with a look at this - blog.themeforest.net
• Centering Negative Margin
  A great example of horizontal centering. Also see our examples page to view variations of this.
• CSS support in email clients
  Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.
• Zen Garden
  Truly amazing site depicting the power of CSS.
• CSS Reset
  Bare bones css reset so you are starting from scracth. Here is another one from Yahoo.
• 6 Shooter
  Some great all CSS templates.
• CSS Table Gallery
  Table design based on the fresh TagBox style.
• [Quir]{smode]
  QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains about 120 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the WWW for studying and defeating browser incompatibilities. It is free of charge and ads, and largely free of copyrights. CSS contents and browser compatibility

• CSS Sprites
  Online CSS Sprite builder.
• Light Box 2 Probably one of the most popular currently out there at the moment.
  
  » Long list of Lightbox variations
• Highslide JS
  Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.
• ThickBox 3.1
• CSS Image Pop Up Viewer
  A CSS image pop up.
• CSS Image Pop Up 2
  Another CSS approach to the image pop up.
• Dragable CSS Layer
  "Amazing Draggable Layer" which can be used instead of popup windows.

• How to align text, images and form controls
  See - 3.2.2 How to horizontally align form controls.