The Complete List of CSS Tools

There are so many great CSS Tools out there to use!  Please feel free to use this list as the most up to date list on the Internet.  Also if you love this list, make sure you sign up for the newsletter at the top right of the site!

Other Great Real World Lists

• Best of the Best Web 2.0 Web Sites <– New
• The Complete List of Ajax Tools <– New

User Interface

• I Like Your Color via Red Alt — Type in the URL and it grabs the interface colors and display them in hex. Freaking Awsome!
• CSS Multi-element Rollover Generator
  Create two distinct styles of rollover button, using CSS and just one image. The difference here is that you can optionally allow some background space above your image in which to place CSS- controlled rollover text.
• CSS Rounded Box Generator
• Ruthsarian Layouts
  6 good-looking, free CSS page layout templates, complete with colors, headings, etc;
• Bluerobot Layout Reservoir
  2 and 3-column page skeleton CSS layouts
• Glish CSS Layout techniques
  Two, 3 and 4 column skeleton CSS layouts
• The Layout-o-matic – enter page width, number of columns, and padding and it generates CSS and HTML skeleton layout.
• Little Boxes – various box layout CSS stylesheets.
• Open Source Web Design
  Various complete page templates free for use.
• Web Builders’ Toolkit
  More links to template resources.
• Iconico Online CSS Scrollbar Color Changer
• List-u-Like is a CSS Menu-Generator: create cross-browser list-based navigation bars with ease
• Nifty Corners: rounded corners without images
• Round Corner Stone/Icon (rcsi) V1.0
  enhance the table with round corner stone!
• Xylescope
  Look forward to analysing complex CSS designs with incredible ease and experimenting with third-party sites, without having to download them onto your own computer first.
• W3C Core Styles
• Checkliste zur Webseitengestaltung
• Testseite zur Zeilenbreite

Accesability Checkers

• Accessibility Valet Demonstrator
• Bobby Online Service
• Cynthia Says
• OCAWA Web Accessibility Expert
• Torquemada
  A complete methodology for accessibility analysis which uses a tool for page checking that makes it possible to quickly identify which parts of a page are in error and the HTML code corresponding to these parts.
• UI Site check
  Fill out only one form instead of dozens when checking a site. Site Check lists the test results provided by important validators and accessibility tools.
• WAVE 3.5 Accessibility Tool
  Provides useful information about accessibility features and errors within your page. It is designed to facilitate the design process by adding icons to a version of your page. The icons represent structural, content, usability, or accessibility feature or problems within your content. You can easily see the exact location within your page where an error is present.
• Web-based Site Usability Checker
• WebXACT Quality & Accessibility Check
  is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.
• Will the browser apply the rule(s)?
• TAW – Test accessibilidad web

Formatters and Optimizers

• CSS Formatter and Optimiser
  lets you select how readable or small you want your CSS to be.
• CSS Compressor
  Use this utility to compress your CSS to increase loading speed and save on bandwidth as well….
• Online CSS Compressor
  cleans and compresses your CSS in a variety of ways, significantly optimizing and reducing its size at the expensive of readability.
• CSS Compressor
• CSS Syntax Checker for BBEdit and TextWrangler
• CSSTidy
  CSSTidy is an opensource CSS parser and optimiser.
• CSS Tweak ~ Web Based CSS Tweaker!
  CSS Tweak will take your CSS and optimize it so that file sizes and download times are reduced…..Mac
• Clean CSS – Optmize and Format your CSS
  CSS Formatter and Optimiser, CSS Formatierer und Optimierer
• Format CSS Online
  Automatically format your CSS (cascading style sheets) so they are easy to read and edit…..
• Online CSS Optimizer
  CSS Optimizer optimizes and reduces the file size of the Cascading Style Sheets
• Online CSS Optimiser/Optimizer
  This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go
• Tabifier
  HTML and CSS code beautifier
• Webucator
  A CSS reference that allows you to test your CSS code.
• CSS Centricle: Will the browser apply the rule(s)?

Fonts

• CSS Font and Text Style Wizard
  Use this wizard to experiment with font and text styles and generate sample CSS style source code.
• Em Calculator
  Tool for calculating pixel font sizes to ems.
• text sizing – up the garden path
  264 Screenshots

Forms

• Accessible Form Builder
  Generate XHTML-compliant accessible forms quicky and easily
• CSS Form Code Maker
  Generates ‘Colorful Box Layout’ For Forms
• JotForm
  Web Based WYSIWYG Form Builder
• korhoen typeviewer is a viewer which helps you to take a look at CSS typesetting and adjust it to a better readability

Layout

• CssCreator -> Page Layout: this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer.
• CSS HTML PHP Website Template Maker
  This PHP – HTML – CSS template generator creates a two column layout with both a header and a footer….
• Firdamatic
  Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily…
• Free CSS Template Code Generator
  Maker for 3 Column Layout (tableless)
• Layout-o-Matic
  Generates tableless CSS layouts at the touch of a button
• QrONE CSS Designer
  Online CSS Generator
• Scriptomizers
  A CSS stylesheet generator
• The Generator Form v2.90
  CSS Source Ordered Variable Border 1-3 Columned Page Maker

Galleries

• CSSElite
• openwebdesign.org
  A community of designers and site owners sharing free web design templates as well as web design information.
• CSS thesis
• Wow-Factor
• Web Standards Awards
• W3 Compliant Sites
• Unmatched Style
• The Weekly Standards
• CSS-Mania
• CSS Drive
• CSS Import
• CSS Zen Garden
• CSS Vault
• CSS Beauty
• Stylegala

Help Guides / Hacks / Learning Materials

• SelectOracle
  Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input” area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input” area. English, Spanish, German and Bulgarian versions are available.
• Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
• Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
• IE Word Wrap Doppelganger Bug — Sitepoint on how heading elements could leave a small trail of itself as it wraps to the next line in IE6.
• Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
• Easy CSS hacks for IE7 — Some CSS hacks that will work with IE7. Hey, you never know.
• Web Browser CSS Support with updated listings for IE7, Firefox 1.5, and Opera 8.5.
• snook.ca on the “+” CSS hack which you can use to target IE6 and IE7 only.
• On having layout reveals some information and workarounds for IE’s strange and proprietary ‘rendering-concept’: hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:
  • “…A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.”
• Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
• IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
  • “…Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.”
• Ten more CSS tricks you may not know — includes few IE bug fix techniques
• The “Holly” Hack — taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
• CSS tests — a great list of all the CSS gotcha’s under one roof.
• max-width in IE using VERY little known IE-only CSS “Dynamic properties”
• List of @import hacks to hide CSS from different browsers.
• Essentials of CSS Hacking For Internet Explorer — an excellent list of quick hints on safeguarding your CSS against IE.
• Web browser standards support — Charts comparing IE 6, Firefox 1.0, and Opera 8.
• Full CSS property browser compatibility chart
• The perils of using XHTML properly — Potential pitfalls of declaring application/xhtml+xml MIME type.
• IE Double Float Margin Bug.

Tips and Tricks

• Hot Dates with CSS shows how to make blog dates look like small calendar pages.
• A nice demo of experimenting with CSS-only solution to imagemap with popups using unordered list.
• Clagnut shows you how to have Line breaks in tooltips by using the carriage return entity &#013. How utterly simple!
• Styling check boxes and radio buttons only with CSS uses 100% CSS solution (via attribute value selector and positioned background images) to serve up customized form elements. It’s semantically correct and degrades well for browsers that doesn’t support this method (IE), but is it also accessible?
• Stuart Robertson’s CSS text shadow technique seems like one of the easiest-to-implement techniques I’ve come across. It uses :before pseudo element and supports both Safari and Firefox browsers.
• From “holy crap why didn’t I think of that” file… Airbag has a simple but great idea of using a ruler background images in CSS to check DIV sizing during development.
• CSS Colors: Take Control Using PHP is a wonderful tutorial from Barely Fitz on how to use PHP variables to represent colors in your CSS which you can then manipulate — quickly changing all the colors from a single source, generating new colors via algorythm, etc.
• Web Graphics has a CSS3 demo on using :target pseudo class to style anchor link targets.
• Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: CSS Drive.
• A More Accessible Map — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
• Styling horizontal rules with CSS — “…Don’t waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your HR in a DIV, set the HR to display none and style the surrounding DIV instead.”. Now why the heck didn’t I think of that?
• CSS image preloader technique from maratz.com — using background image CSS property on images to serve as image place holders.
• stefanhayden.com shows a neat (and easy) way to make sure the client fetches new CSS with HTML update: just add a variable at the end of the CSS with each update.
• Wrapping text around curves via CSS if you don’t mind the markup cruft.
• codylindley.com’s Pushpin Header Technique “…is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable”
• hovebox image gallery via sonspring. It’s sort of like mini-lightbox that enlarges the thumbnails on hover. Very nice.
• Beautifully Numbered Lists looks nice except that it’s not really an ordered list. Instead it used definition lists inside the ordered list for presentation — which means true standardistas might object.
• In what could only be catagorized under Uber-Anal department, ollicle.com how to alter CSS line-height based on paragraph width via javascript for optimal readbility.
• From “I didn’t know that” file… wg tells us that using &minus; instead of a dash character prevents some browser from wrapping the words connected by it.
• Eric Meyer, the man with CSS skillz that payz da billz, reveals something I’ve never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described in his article but I can’t believe that I had it all wrong. I’ve been telling everyone that “You must declare unit for ANY measurement values unless it’s zero”.
• loudandlonely has an interesting article on how to obscure your email address via CSS by using some clever a:link:before and a:link:after pseudo-elements.
• digital-web has a good run down on things to consider when using CSS typography.
• 456bereastreet takes a first crack at explaining CSS3 selectors
• Another good “footer at the bottom” using only CSS demo.
• Pup’s Box Flow Hack shows you how to allow even block items to flow around floating boxes.
• Simple(r) CSS Image Switcher — Unlike the orginal CSS image switcher, this version doesn’t use nested unordered lists. Instead, it uses just one unordered list, with the link image placed inside the anchor.
• Another very nice tutorial from 24ways. This time it’s Curly Quotes Without Images, a technique popular in citing blockquotes with enlarged quotation marks in the beginning and at the end of the quote. But without using background images.
• FACE is an interesting javascript-powered / CSS-controlled page animation technique.
• Defining CSS constants using PHP is a good article on using PHP to allow constants (‘variables’) in CSS. For instance you can use this technique to define a repetitive color in CSS as a variable. That way you only need to declare it once and only change that one instance should you want to change that color. Very handy.
• 24ways has a good article on using z-index attribute.
• apples-to-oranges.com has a fantastic tutorial on how to create great looking bar graphs with CSS
• Image map for detailed information showcases use of CSS to provide an image with mouse-over-section for detailed notes.
• From the “How the heck did I miss this” department: cssQuery a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
• Bulletproof logos via simplebits
• Css Color Chart
• Check marking visited links
• CSS Gradients Demo — creating gradient background effect in CSS using server-side constants technique developed bu Shaun Inman.
• Creating s star rating using CSS
  • CSS Star Rating Part Deux is a follow-up to the aforementioned technique that adds the starting “state”.
  • And here’s an external article which wraps it all up with a tutorial on how to use CSS star rating with PHP and database.
• Image Placement Technique — Yes. Not “replacement” but “placement”.
• FooterStick — how to force the footer of a webpage to stick to the bottom of the viewport.
• Shaun Inman’s CSS-SSV — using PHP variables in CSS.
• CSS scroll box fade using alpha-channel PNG
• Styling visited links with :after pseudo class
• Footnotes with CSS and JS
• Restaurant menu layout in CSS via web-graphics.com
• CSS scale image — using em values to scale the images in CSS. via bigbaer.com
• Slantastic — create irregular shaped boxes.
• yDSF – Robust CSS Drop Shadows
• CSS sliding photo gallery — an interesting way to present equal-sized images on mouse hover
• alsacreations.com — Nice collection of CSS tutorials that covers most of the basics.
• Using CSS selectors to apply Javascript functionality — ‘click here to delete’ demo
• Flickr-style image map with only CSS
• Web Color Schemes — via returnofdesign.com
• Making the jump to tableless design — Andy Budd’s presentation at @media 2005.
• CSS Help Pile
• Simple Clearing of Floats — various methods of clearing floats.
• Visited links styling — via webdesign.maratz.com.
• mandarindesign’s text tricks.
• Sweet collection of CSS how-tos — via maratz.com
• HoverHelp — DHTML/CSS tool tips on hover.
• How-to: Giving To Hiram‚ masthead — Nice masthead design in CSS. via cameronmoll.com
• :focus and :not — 9rules.com discusses two less-known CSS pseudo clsses.
• Dusntan
• welstyled.com — CSS articles and tips including “min-height hack”, “the underscore hack”, “single line vertical centering”, “photocards”. etc.
• Couloir Slideshow Script — Wrong. It ain’t Flash. Just pure javascript/CSS goodness.
• WASP list some international sites that are inspired by CSS Zen Garden Project
• Creating “slants” effect in CSS with border properties.

If you liked this article, please share it on DZone, del.icio.us, StumbleUpon or Digg. I’d appreciate it.