Top 200 CSS Resources

Tutorials:

Tutorial from W3C – http://www.w3.org/Style/Examples/011/firstcss

Tutorials from HTML Dog – http://www.htmldog.com/

CSS Examples with demo –  http://csshook.com/cssexamples/

Complete CSS guide – http://www.westciv.com/style_master/academy/css_tutorial/

W3 Schools CSS tutorials – http://www.w3schools.com/css/default.asp

HTML.net CSS tutorials – http://www.html.net/tutorials/css/

HTMLhelp.com: CSS – http://www.htmlhelp.com/reference/css/

BrainJar: using style sheets – http://www.brainjar.com/css/using/default.asp

Beginner’s guide to CSS – http://friendlybit.com/tutorial/beginners-guide-to-css-and-standards/

Creating a CSS layout from scratch – http://www.subcide.com/tutorials/csslayout/

List building tutorial from MaxDesign.com – http://css.maxdesign.com.au/listutorial/

Tutorial on floating elements from MaxDesign – http://css.maxdesign.com.au/floatutorial/

CSS no crap primer – http://wendypeck.com/css101.html

CSShark – http://www.mako4css.com/

Learn CSS positioning in 10 Steps – http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Basics – http://www.cssbasics.com/

The complete CSS tutorial – http://www.echoecho.com/css.htm

An interactive tutorial for beginners – http://www.davesite.com/webstation/css/

CSS styles tutorial – http://www.smartwebby.com/web_site_design/css_styles_tutorial.asp

Understanding CSS (focused on Dreamweaver) –http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html

Drop shadows with CSS – http://www.phoenity.com/newtedge/drop_shadow/


Navigation Menus:

Dynamic Drive (Editor’s Choice) – http://www.dynamicdrive.com/style/

Listamatic (Editor’s Choice) – http://css.maxdesign.com.au/listamatic/

Vandelay Website Design – http://www.vandelaydesign.com/cssmenus/lists.htm

Listamatic 2 – http://css.maxdesign.com.au/listamatic2/index.htm

CSS Play – http://www.cssplay.co.uk/menus/

CSS Showcase – http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

Exploding Boy – http://exploding-boy.com/images/cssmenus/menus.html

Vertical menus from Exploding Boy – http://exploding-boy.com/images/EBmenus/menus.html

13 Styles – http://www.13styles.com/

CSS dropdowns – http://www.positioniseverything.net/css-dropdowns.html

A list of navigation menus – http://www.alvit.de/web-dev/tabs-and-pure-css-navigation-menus.html


Links:

Web Developer’s Handbook (Editor’s Choice) – http://www.alvit.de/handbook/

CCS Accessibility and Standards Links (Editor’s Choice) –http://www.dezwozhere.com/links.html

Web Design References: CSS –http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html

40+ Tooltips Scripts from Smashing Magazine – http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

The Open Sourcery – http://theopensourcery.com/oscssref.htm

Galleries:

CSS Vault (Editor’s Choice) – http://cssvault.com/

CSS Based (Editor’s Choice) – http://www.cssbased.com/

CSS Beauty (Editor’s Choice) – http://www.cssbeauty.com/gallery/

Mezzoblue & CSS Zen Garden – http://www.mezzoblue.com/zengarden/alldesigns/

CSS Tux – http://www.csstux.com/index.php

CSS Drive – http://www.cssdrive.com/

W3C Sites – http://www.w3csites.com/

CSS Remix – http://www.cssremix.com/

CSS Import – http://www.cssimport.com/

CSS Fresh – http://cssfresh.com/

Design Shack – http://www.designsnack.com/

DesignShack.co.uk – http://www.designshack.co.uk/index.php

CSS Mania – http://cssmania.com/

CSS Elite – http://www.csselite.com/

Style Crunch – http://www.stylecrunch.com/

Screen Fluent – http://screenfluent.com/

CSS Smooth Operator – http://csssmoothoperator.com/

The Horizontal Way – http://www.thehorizontalway.com/

Dark Eye – http://www.dark-i.com/

CSS Web Design Yorkshire – http://www.css-design-yorkshire.com/

Web Creme – http://www.webcreme.com/

Edu Style – http://www.edustyle.net/

Liquid Designs – http://www.cssliquid.com/category/gallery/

CSS Bloom – http://cssbloom.com/

Unmatched Style – http://www.unmatchedstyle.com/

Net Cocktail – http://netcocktail.com/

CSS Impress – http://www.cssimpress.com/

CSS Collection – http://csscollection.com/

CSS Flavor – http://www.cssflavor.com/

Screenalicious – http://www.screenalicious.com/

CSS Galleries – http://www.css-galleries.com/

Most Inspired – http://www.mostinspired.com/

Submit CSS – http://www.submitcss.com/

Inspiration King – http://www.inspirationking.com/

CSS Love – http://csslove.net/

CSS Princess – http://cssprincess.com/

Articles:

Style Gala – http://www.stylegala.com/

A List Apart’s CSS articles – http://www.alistapart.com/topics/code/css/

CSS Globe – http://www.cssglobe.com/index.asp

CSS Help Pile – http://www.artypapers.com/csshelppile/

Why use CSS-based design? – http://www.vandelaydesign.com/blog/css/why-use-css-based-design/

Expert ideas for better CSS coding from Smashing Magazine –http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

CSS Positioning article from About.com – http://webdesign.about.com/b/a/256055.htm

CSS layout article from Glish.com – http://www.glish.com/css/

CSS Edge: advanced CSS – http://meyerweb.com/eric/css/edge/

Advanced CSS layouts article – http://www.webreference.com/authoring/style/sheets/layout/advanced/

Exploring the limits of CSS layout – http://www.sitepoint.com/article/exploring-limits-css-layout

CSS articles from Webcredible – http://www.webcredible.co.uk/user-friendly-resources/css/

CSS articles from WebsiteTips.com – http://websitetips.com/css/

Use CSS for SEO – http://www.htmlgoodies.com/beyond/css/article.php/3682856

10 CSS tricks you may not know – http://itwales.com/997814_textonly.htm

53 CSS techniques you couldn’t live without: Smashing Magazine –http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

CSS from the ground up – http://www.wpdfd.com/issues/70/css_from_the_ground_up/

4 reasons to use CSS-based navigation – http://www.vandelaydesign.com/blog/css/4-reasons-to-use-css-based-navigation/

Templates:

Layout Gala (Editor’s Choice) – http://blog.html.it/layoutgala/

Open Designs (Editor’s Choice) – http://www.opendesigns.org/

Osskins – http://www.osskins.com/main/

Open Source Templates – http://www.opensourcetemplates.org/

Styleshout – http://www.styleshout.com/

Zymic – http://zymic.com/show_templates.php?id=1

Open Web Design – http://www.openwebdesign.org/

CSS Design Templates – http://templates.arcsin.se/

Free-CSS-Templates.com – http://www.free-css-templates.com/

FreeCSSTemplates.org – http://www.freecsstemplates.org/

CSS Templates – http://www.free-css-templates.co.uk/free-templates/page1.php

Mollio – http://www.mollio.org/

Template World – http://www.templateworld.com/free_templates.html

Code-Sucks.com – http://www.code-sucks.com/css%20layouts/

Themes Base – http://www.themesbase.com/

CSS Template Gallery – http://tools.i-use.it/

BenMeadowCroft.com – http://www.benmeadowcroft.com/webdev/

Forums:

Digital Point: CSS forum – http://forums.digitalpoint.com/forumdisplay.php?f=39

Sitepoint: CSS forum – http://www.sitepoint.com/forums/forumdisplay.php?f=53

CSS Discuss (mailing list) – http://www.css-discuss.org/


Bugs and Hacks:

CSS crib sheet (Editor’s Choice) – http://www.mezzoblue.com/css/cribsheet/

Position is Everything – http://www.positioniseverything.net/

Browser compatibility – http://www.quirksmode.org/css/contents.html

Browser bugs – http://www.gtalbot.org/BrowserBugsSection/

Box Model Hack – http://www.tantek.com/CSS/Examples/boxmodelhack.html


Random:

Computer-generated web design – http://www.strangebanana.com/generator.aspx

CSS graph resources – http://dhtmlsite.com/cssgraphs.php


Update: These Resources have been added following the initial posting.

CSS Specifity – www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

Firdamatic – www.wannabegirl.org/firdamatic

Spanky Corners – http://tools.sitepoint.com/spanky/index.php

CSS Tweak – www.blazenewmedia.com/articles/css-tweak-dashboard-widget

CSS Compressor – www.cssdrive.com/index.php/main/csscompressor

CSS Grid Calculator – www.gwhite.us/downloads/css_grid_calc.html

Spiffy Corners – www.spiffycorners.com

Form Architect – www.formarchitect.com/index.php

Dynamic Text Replacement – www.joaomak.net/util/dtr

Generating Dynamic CSS with PHP – www.digital-web.com/articles/generating_dynamic_css_with_php

CSS Button Creator – www.thepcmanwebsite.com/css_button_creator.php

CSS, Image Sprites, Background Images and Website Optimization –www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization

Reference:

Official homepage of CSS – http://www.w3.org/Style/CSS/

Official documentation of CSS – http://www.w3.org/TR/CSS21/

CSS web standards – http://www.webstandards.org/learn/external/css/


Tools:

Validator from W3C (Editor’s Choice) – http://jigsaw.w3.org/css-validator/

CSS redundancy checker – http://infovore.org/archives/2007/07/06/the-css-redundancy-checker/

CSS formatting and optimizing tool (not a validation tool) – http://www.cleancss.com/

CSS Optimizer – http://www.cssoptimiser.com/

CSS Analyzer (a validator plus) – http://juicystudio.com/services/csstest.php

CSS Mate: CSS editor – http://cssmate.com/csseditor.htm

CSS Compressor (still in development, may not work correctly) – http://iceyboard.no-ip.org/projects/css_compressor

CSS Tidy – http://csstidy.sourceforge.net/index.php

Layout-o-matic – http://www.inknoise.com/experimental/layoutomatic.php

CSS rounded box generator – http://www.neuroticweb.com/recursos/css-rounded-box/

List creator – http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
CSS form code maker – http://www.maketemplate.com/form/

CSS layout generator – http://csscreator.com/?q=tools/layout

CSS Tweak – http://www.blazenewmedia.com/articles/css-tweak-dashboard-widget

CSS speech bubbles – http://www.willmayo.com/2007/02/10/css-speech-bubbles/

CSS Tips and Techniques

– Push Your Web Design Into The Future With CSS3[Smashing Magazine]

– CSS Typography: Contrast Techniques and Best Practices [Noupe]

– Powerful CSS Techniques for Effective Coding[Smashing Magazine]

– 4 Uber Cool CSS Techniques for Links [Css Globe]

– 10 Principles of the CSS Masters [NETTUTS]

– 12 Principles For Keeping Your Code Clean [Smashing Magazine]

– 101 CSS Techniques Of All Time – Part 1 [Noupe]

– Resetting Your Styles with CSS Reset [Six Revisions]

– 53 CSS Techniques You Couldn’t Live Without [Smashing Magazine]

– 101 CSS Techniques Of All Time – Part 2 [Noupe]

– Structural Naming Convention in CSS [Six Revisions]

– 10 Challenging but Awesome CSS Techniques [NETTUTS]

– Improving Code Readability With CSS Styleguides [Smashing Magazine]

– 8 Premium One Line Css Tips [Css Globe]

– 20+ Common CSS Bugs and Fixes [Noupe]

– 30+ CSS Cheat Sheets and Guides [All Web Design Resources]

– 5 Techniques to Acquaint You With CSS 3 [NETTUTS]

– 70 Expert Ideas for Better CSS Coding [Smashing Magazine]

CSS Templates and Layouts

– Free CSS Layouts and Templates [Smashing Magazine]

– CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices [Noupe]

– CSS Float Theory: Things You Should Know [Smashing Magazine]

– CSS Navigation Techniques (37 entries)

– 38 Free Elegant XHTML/CSS Website Templates [Hongkiat]

– Top 10 CSS Table Designs [Smashing Magazine]

– 50+ Nice Clean CSS Tab-Based Navigation Scripts [Hongkiat]

– CSS-Based Forms: Modern Solutions [Smashing Magazine]

CSS Tutorials

– CSS Tutorials by W3Schools

– How to: CSS Large Background [Web Designer Wall]

– Cascading Style Sheets Basics

– Learn CSS Positioning in Ten Steps [BarelyFitz]

– Complete CSS Guide

– The Highly Extensible CSS Interface [Cameron Moll]

– Guide to Cascading Style Sheets

– Creating a CSS Layout from Scratch [Subcide]

– CSS Tutorials by HTML.net

CSS Showcases and Galleries

– 24 CSS Design Showcase Websites [Toxel]

– 120 Excellent Examples of CSS Horizantal Menu [CSS Tea]

– The CSS Gallery List

– 40 Beautiful Dark CSS Website Designs [Toxel]

– Best of CSS Design 2008 [Web Designer Wall]

CSS Resources

– Web Developer’s Handbook

– Dynamic Drive CSS Library

– SitePoint CSS Reference

– 101 CSS Resources [Jason Bartholme]

– 100 Freebie CSS Resources [Software Developer]

CSS Tools

– 50 Extremely Useful and Powerful CSS Tools [Smashing Magazine]

– CSS Validation Service

– 40+ CSS Generators, Creators, and Makers [All Web Design Resources]

– List of CSS Tools [Smashing Magazine]

– CSS Layout Generator [CSS Creator]

– CSS Editors Reviewed [Smashing Magazine]

You may also like...