CSS Resources

Local Topics

• AdoptACSSFramework: Feature Proposal: Adopt a CSS framework from another project Motivation We currently have our own, and with all respect to the designers, fairly crude, CSS frame...
• CSSResources: CSS Resources A list of resources for those intrepid adventurers who want to learn more about CSS. Local Topics this list is automatically generated by searching...
• GridCss: GridCss Use to load this into your page. "}%
• LazyLoadJsAndCssForSpeed: Feature Proposal: Lazy Load Javascript and Css Motivation As I use javascript popup dialogs more, I find myself needing to get javascript loaded dynamically so...
• RemoveHardcodedCssClassNames: Feature Proposal: Remove hardcoded CSS class names Motivation Enable proper Foswiki theming. Description and Documentation Proper theming is best done through C...

Offsite Resources

Authoring and Learning

• http://alistapart.com/ - one of the longest running web design sites
• http://diveintoaccessibility.org/ - the most accessible site I've seen, where accessible means ease of understanding as much as ease of use
• http://simon.incutio.com/categories/csstutorial/ - "CSS ain't Rocket Science" an ongoing tutorial series, focusses on edge cases which tend to be where most of the frustration (and learning) is found.
• http://css-discuss.incutio.com/ - wiki for the css-discuss mailing list
• http://archivist.incutio.com/css-discuss/ - archives for the css-discuss mailing list, very high signal to noise ratio
• http://meyerweb.com/eric/css/edge/ - pushing the boudaries of what is possible when using CSS
• http://realworldstyle.com/ - fonts for unix, taming lists, hanging punctuation, environmental style
• http://www.codestyle.org/ - Aims to answer key questions for Web developers. Which Web fonts are most common? What is the best way to use media dependent stylesheets? How can I design more robust, accessible Websites?
• http://webstandards.org/ - a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all
• http://www.w3schools.com/css/ - Excellent css tutorials and examples. The examples allow you to edit code and see results in separate frame. Great learning tool!
• http://devedge.netscape.com/library/xref/2003/css-support/ - CSS Support Charts (not up to date, but still very useful)
• http://www.positioniseverything.net/
  • Windows Explorer vs. the Standards
  • Other Articles
• http://www.quirksmode.org/ - very useful and comprehensive site covering more than just CSS, javascript and W3C DOM for example. Takes some unconventional stances, like not using doctypes and backs them up with solid reasoning. A must read.
• http://www.nic.fi/~tapio1/Teaching/Netscape.php3 - CSS for Netscape 4: what to use and what not
• http://www.alvit.de/web-dev/css-techniques-and-examples.html - Part of Vitaly Friedman's Web-Dev-Bookmarks. Lots of very good links.

Tools

• [your favourite text editor]
• NotepadPlusPlus - a folding editor for Windows. Good for tracking down missing /DIVS
• http://topstyle.com/ - Lightweight and capable CSS editor. Only for Windows.
• http://cascades.mozdev.org/ - Stylesheet editor for Mozilla
• http://favelets.com/ - For Internet Explorer. Grab the stylesheet favelet to give IE the same functionality Netscape/Mozilla has of being able to change stylesheets on the fly.
• http://www.squarefree.com/bookmarklets/ - absolutely indispensible especially test styles which lets you see the effects of your css on any web page, from any server, in realtime as you type.
• http://www.cleancss.com/ - CSS compressor with lots of knobs to turn. Will allow you to learn a few things as well.
• Web Developer Extension - The Web Developer extension adds a menu and a toolbar to the browser. It is designed for Firefox, and others and will run on any platform that these browsers support.
• https://zzzcode.ai/css/code-generator online CSS AI-powered programming code generator tool. It has lot of other useful AI generator tools as well.

Examples

• http://csszengarden.com/ - what real graphic artists who understand CSS can do; truely inspiring
• http://glish.com/css/
• http://bluerobot.com/
• http://www.waferbaby.com/
• http://zeldman.com/
• http://www.thenoodleincident.com/ - particularly the page on Sane CSS Sizes that the author created to deal with text sizing problems
• http://www.positioniseverything.net/ - Browser specific bug demos
  • Clearing a float container without source markup