Vandelay Website Design Blog

Extensive CSS List: 134 Top CSS Resources

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/


Tutorials:

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

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

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

 

 

 

 

 

Originally Published July 11th, 2007

13 comments from readers

  • 1 Jenn Jul 14, 2007 at 7:57 pm

    W3 Schools is not affiliated in any way with the W3C - and you list them as “W3C Schools” which is misleading. Just thought you should know. This is a great resource, and has a lot of valuable sites and information.

  • 2 Vandelay Design Jul 14, 2007 at 9:14 pm

    Jenn,
    You’re right - sorry for the typo. It has been fixed. Thank you for pointing it out.

  • 3 DESIGNEXPANSE.COM Jul 24, 2007 at 10:44 am

    Here’s another web design gallery http://www.designexpanse.com

  • 4 Vandelay Design Jul 24, 2007 at 5:32 pm

    Thanks for the resource. It is a pretty nice site.

  • 5 Weekly Links << Vandelay Website Design Jul 27, 2007 at 9:10 pm

    […] In addition to this week’s links I’d also like to point out that two of our posts have been added to. New resources have been posted on Extensive CSS List: 134 Top CSS Resources and 68 Essential SEO Resources and Tools. The new additions are added at the end of each post. […]

  • 6 Free CSS Templates Aug 9, 2007 at 3:01 am

    Another resource for your templates section is: http://www.free-css-templates.co.uk/

    There are over 700 CSS based templates to choose from and they are all free

  • 7 CSS Gallery Aug 9, 2007 at 3:03 am

    Another CSS web gallery: http://www.css-gallery.co.uk/

  • 8 Css Globe Aug 9, 2007 at 7:28 am

    Huge List of CSS Resources and Tools…

    Over 130 resources and tools to use for your design projects….

  • 9 http://www.empireunion.org/music.htm Dec 10, 2007 at 1:44 pm

    Hi boys!0ad82650fb6058b2df910853e7596351

  • 10 css web templates Jan 23, 2008 at 6:39 pm

    thanks so much for share these CSS Resources !

  • 11 Mark Mar 31, 2008 at 6:33 am

    Theres another web gallery here:
    http://www.mabucplus.com

  • 12 sfsdgd May 7, 2008 at 3:27 am

    good!!thanks so much for share these CSS Resources !!!

  • 13 Laurent Jun 9, 2008 at 3:30 am

    Another french CSS Design Gallery