Home » » Freebie CSS Resources

Freebie CSS Resources

Written By Vinayak Shejole on Sunday, November 27, 2011 | 9:27 PM

Getting Started

Before you can begin cranking out award winning designs, you'll need to learn the basics of CSS. In this section you'll find what we consider to be the best free resources for learning CSS fundamentals.
  1. W3C: Cascading Style Sheets Homepage - The creators of CSS, W3C, list this as CSS' official homepage. Although the homepage's description of CSS is limited, there is an abundance of links for finding out more information on CSS.
  2. W3C: Cascading Style Sheets, level 2 revision 1 - EDITOR'S CHOICE - The official documentation for the current working version of CSS. This is the first place you should turn to if you have a question on the syntax and usage of CSS.
  3. W3C: CSS Tutorial - The official "hello world" (introductory) CSS walkthrough. Recommended reading for all new CSS developers.
  4. Web Developer's Handbook - An extensive list of web development resources (focusing primarily on CSS) including tutorials, highly requested code snippets, tools and more. The ideal starting place for developers wishing to improve their CSS designs.
  5. Holy CSS Zeldman - Another great list of CSS resources all brought to you with a touch of sarcasm and humor.


A good manual or tutorial is always the most sought after item for every developer looking to learn a new technology. The following Web sites offer comprehensive (and free of course) tutorials and walkthroughs for learning CSS.
  1. Complete CSS Guide - One of the most in-depth CSS resources on the Web. Provides detailed information on the history of CSS, web standards, CSS selectors and properties and much more.
  2. W3Schools CSS Tutorial - A massive CSS tutorial database. Includes walkthroughs, code snippets, reference guides and quizzes.
  3. CSS Tutorial - EDITOR'S CHOICE - Extremely user friendly CSS guide. Places a heavy emphasis on teaching the box model -- one of the hardest to comprehend/manipulate, yet one of the most important CSS features.
  4. CSS Tutorials - Quality CSS tutorials for both beginner and advanced users.
  5. Using Style Sheets - Breaks down CSS from a programmers standpoint. Recommended for developers that already know the lingo.
  6. Learn CSS Positioning in Ten Steps - An excellent introductory visual guide for learning the details of static, relative, absolute and float positions.
  7. Guide to Cascading Style Sheets - Multiple introductory CSS resources including tutorials and CSS property descriptions.
  8. CSS Style - Informative breakdown of the main CSS properties. Includes visual examples for every entry.
  9. Beginner's guide to CSS - A very easy to read walkthrough for creating your first CSS Web site.
  10. Creating a CSS layout from sratch - An excellent walkthrough for developing your second CSS Web site. Recommended for users with some knowledge of CSS but who don't know where to begin.


Sometimes the difference between a good developer and a great one is the tools he uses. Here are 20 excellent tools for speeding up the Web site development process, optimizing your CSS code and creating more efficient CSS designs in general.
  1. W3C: CSS Validation Service - EDITOR'S CHOICE - The web's most popular (and best) method for validating CSS. Make sure your Web site is parsing accurate, not erroneous code.
  2. CSS Analyser - Performs a W3C CSS validation and color contrast test to make sure your CSS isn't flawed.
  3. W3C: Markup Validation Service - The most popular HTML/XHTML checker on the web.
  4. WDG HTML Validator - An extremely through (and strict) HTML validation tool.
  5. W3C: Link Checker - Recursively scans a Web site for broken links.
  6. SelectORacle - Explains the roles of a CSS file's selectors; e.g. Selector A is a descendant of Selector B. Useful for cleaning up confusing CSS code and debugging selectors that aren't exhibiting the property you think they should.
  7. CSSMate - A solid tool for creating the code for individual CSS selectors.
  8. Clean CSS - Cleans up and optimizes your code for faster Web site loading time; maintains a set of unique customizable options for uses wishing to overhaul their code.
  9. Icey CSS Compressor - EDITOR'S CHOICE - The most accurate tool for converting bulky CSS documents into efficient pieces of code.
  10. CSS Optimizer - Reduces the file size of CSS documents.
  11. HTML Tidy - Takes poorly tabbed/difficult to read HTML/XHTML documents and turns them into understandable pieces of code.
  12. Colors on the Web - EDITOR'S CHOICE - Uses sophisticated technology to help you pick the perfect color scheme for your Web site. Start off by selecting a base color and let the Web site do the rest.
  13. Color Schemer - Pick your base color and design complex color schemes in no time with this unique tool.
  14. JotForm - Dynamically build forms for your Web site with a WYSIWYG editor in real time. The only negative is that it requires registration.
  15. Total Validator - Scans your Web site for web accessibility standards, broken links and HTML clarity. Also comes equipped with a screenshot option that allows you to see what your Web site looks like through the eyes of various Windows and Linux browsers.
  16. BrowsrCamp - Takes and displays real time screen shots of your Web site through the eyes of Safari.
  17. List-O-Matic - Auto generates CSS lists used for navigation, just follow the wizard and submit.
  18. Special Characters in HTML - This might not necessarily be a tool (more of a reference guide if you will) but does list all of the special characters you must use to replace erroneous content on your webpage such as curly quotes.
  19. Web Page Analyzer - Analyzes your Web sites loading time and gives advice on how to reduce it. Places a heavy emphasis on the type and number of objects in use.
  20. Watchfire WebXACT - Okay so maybe this one isn't a CSS tool, but given that it performs exhaustive tests to make sure your Web site meets various quality, accessibility and privacy web standards, we figured you wouldn't mind adding it to your arsenal.

Code Libraries

If you're looking to improve on a few areas of your Web site (such as beautifying buttons or adding more dynamic features) you should definitely check out the following code libraries.
  1. Dynamic Drive CSS Library - An assortment of popular CSS snippets with a focus on dynamic menus.
  2. A List Apart: CSS - The CSS section from the popular web developers resource "A List Apart." Posts various CSS design techniques about once per month. Be sure to check out their entire Web site, you'd be surprised how much you'd learn.
  3. CSSPlay - EDITOR'S CHOICE - Extensive library of highly requested source code snippets. Once you find the code you're after, view the page's source code, extract it, and modify it as you see fit. We particularly liked Snazzy Borders.
  4. Web Design References: Cascading Style Sheets - A massive list of various CSS code snippets, articles, tips and more.
  5. CSS Navigation Techniques - Here is a nice compilation of CSS navigation bars. If you want your Web site to be successful, you must have an attractive, easy to use navigation system.

Browser Bugs

Even the best developers are caught off guard by an occasional cross platform browser bug, and in today's global market, not accounting for the 10% of your audience that might be using a non-standard browser could be detrimental. Here are a few Web sites listing the most common CSS browser bugs, and tips for you to avoid them.
  1. Position is Everything - A general CSS knowledge base with a focus on bugs. Also maintains a list of other anti CSS bug Web sites.
  2. CSS contents and browser compatibility - EDITOR'S CHOICE - Graphical model explaining how specific browsers react to CSS issues.
  3. Browser Bug Collection - Large collection of CSS browser bugs for Internet Explorer, Opera, and Mozilla.
  4. CSS Crib Sheet - General tips for avoiding browser specific CSS bugs.
  5. Design Detector - Demos of and solutions for common CSS browser bugs.


Perhaps the best way to transform your Web site from bland to bold is by mimicking what some of the best accredited designers are doing. Here is a list of 35 Web site galleries showcasing some of the best CSS designs on the web, allowing you to get a better idea of what sort of design to shoot for.
  1. CSStux - Gallery of some of the best CSS Web sites found on the web. Be sure to view their featured sites section.
  2. The Horizontal Way - Showcase of Web sites that serve content horizontally rather than vertically.
  3. Dark Eye - EDITOR'S CHOICE - Search for designs by color (up to 6) and meta data in this CSS gallery. Be sure to check out the blog and rate/comment on the designs.
  4. Web Standards Awards - Discontinued gallery boasting 2 years of showcasing the best designs on the web.
  5. Design Snack - Community based web design showcase. Users vote for and comment on stories to determine if they make the front page or not.
  6. CSS Showcase - A collection of Web sites exhibiting unique navigation bars and techniques. We found some very cool implementations of the sliding door effect in here.
  7. W3C Sites - EDITOR'S CHOICE - An extremely large collection of attractive CSS Web sites. Also maintains a designer database sortable by country.
  8. Flickr: Web Design Inspiration - Screenshot collection of nearly 400 well designed Web sites.
  9. Design Shack - A collection of very attractive CSS Web sites sortable by rating, category and color.
  10. CSS Zen Garden - Ever wonder what your Web site would look like through the eyes of an accredited designer? Zen Garden did, and challenged the design community to submit their stylesheets and images of what they feel Zen Garden should look like. Nearly 1000 submissions later, Zen Garden has amassed a huge gallery. Be sure to check out the root Web site mezzoblue as well -- lots of developer articles.
  11. CSS Drive - Maintains a well organized CSS gallery, news and informational article section, and CSS optimizer tool.
  12. Design Meltdown - EDITOR'S CHOICE - A complete web design Web site with tutorials, an extensive gallery sorted by color, type and technique, and a site of the day.
  13. CSS Web Design Yorkshire - Collection of excellent CSS Web sites stumbled upon by the editor of the Web site. Uses the small box approach (displaying only a 161 x 122 image) to preview the Web sites in the gallery.
  14. Web Creme - Uses a highly ergonomic (albeit a bit difficult to navigate) approach to display a collection of superb CSS Web sites.
  15. Logopond - A gallery of attractive company logos, sortable by submission date and color.
  16. eduStyle - Gallery of CSS based University Web sites. Allows users to comment and vote on their favorite submissions.
  17. Screenfluent - Massive collection of more than 5,000 well designed CSS Web sites. Uses fast loading screenshots rather than sorting the Web sites into categories.
  18. Liquid Designs - An all around CSS Web site with news, instructional articles and resources, a gallery and templates. Be sure to check out the hall of fame section.
  19. CSS smooth operator - CSS gallery sorted into a handful of general categories.
  20. CSS vault - Collection of attractive CSS Web sites and useful articles.
  21. CSS Based - A collection of CSS Web sites and RSS feeds.
  22. CSS Beauty - The name says it all, a gallery of the most beautiful CSS Web sites and RSS feeds.
  23. CSSElite - Collection of fantastic CSS Web sites, instructional articles and RSS feeds.
  24. CSS Fresh - Collection of professionally designed CSS Web sites.
  25. CSSBloom - Gallery of CSS Web sites presented in a blog format.
  26. Unmatched Style - Popular CSS Web site gallery. Lacks any sort of sorting technique.
  27. Netcocktail - Gallery of CSS Web sites sortable by color.
  28. CSS Impress - Standard CSS gallery.
  29. CSS Remix - CSS gallery with user ratings that focuses on sites that push the limits of contemporary design.
  30. CSS Import - A standard CSS gallery established in 2005 that brings a Canadian flair to design.
  31. CSS Collection - Standard CSS gallery.
  32. CSS Flavor - A CSS gallery with a focus on sites "that inspire."
  33. CSS Mania - CSS gallery boasting the title of the most updated CSS showcase on the globe.
  34. Screenalicious - Standard CSS gallery with almost 9,000 screens to browse through.
  35. Style Crunch - CSS gallery that allows for user-driven feedback and rankings.


You can be the best developer in the world, but if you have no sense of creativity or style, you're not making the most out of CSS. To help out the graphically challenged, we've included a section with pre-made CSS templates.
  1. Styleshout - A developers personal collection of advanced free templates (some are extremely popular in the blogosphere). Comes equipped with art and fancy color schemes.
  2. CSS Templates - A very large collection of basic CSS templates. With a little stock art and a bit of manipulation you could turn these into some real gems.
  3. Open Web Design - A community of template developers. Download thousands of free templates, or submit some of your own.
  4. Free XHTML/CSS Templates For Web Design - EDITOR'S CHOICE - An awesome (albeit somewhat small) collection of free professionally designed CSS templates.
  5. Zymic - Solid collection of generic CSS templates.
  6. Free CSS Templates - A large compilation of various free CSS templates found around the web (we found many repeat performers in here.)
  7. Mollio - A set of CSS templates displaying the same information across multiple designs to give you a better idea of what style of layout you're looking for.
  8. Little Boxes - A collection of very simple Web site layouts and models to build off of.
  9. CSS Layouts - Extensive examples of basic Web sites layouts and a handful of advanced graphical CSS templates.
  10. Layout Gala - Multiple examples of basic Web site layouts sorted by number of columns.


The following Web sites are dominated by design related articles and industry news. If you're interested in keeping up with the latest and greatest design crazes, this is a good place to start.
  1. 456 Berea Street - Articles and news on web standards, accessibility and usability.
  2. Digital Web Magazine - An internet magazine that publishes articles for aspiring web developers. Useful information for beginners to experts.
  3. Vitamin - Award winning internet magazine for developers. Be sure to check out their interviews section.
  4. CSS Globe - Web standards CSS design site that allows users to control the news. Also maintains outstanding spotlight and portfolio sections where top rated designers show off their work.
  5. CSS Help Pile - List of popular CSS articles via syndicated content. Also maintains a list of very helpful resources (left side of the page.)
  6. Stylegala - EDITOR'S CHOICE - A collection of some of the best CSS articles and tools on the web. Also maintains a small gallery and forum.
  7. Tutorial Blog - Originally designed as a Photoshop tutorial blog, this Web site has morphed into an excellent resource for serious designers.


When you're in a jam the best place to turn are 1) your books 2) your internet resources and 3) your peers. The following Web sites maintain helpful communities of fellow CSS developers eager to help you with your coding woes.
  1. Digital Point CSS Forum - Fairly active forum for CSS developers. Most frequently used by developers looking for help debugging code.
  2. SitePoint CSS Forum - The CSS forum from the popular developers Web site SitePoint.
  3. CSS-Discuss - Popular mailing list/forum for CSS developers.
Share this article :


All Rights Reserved Copyright © 2011. Perfect Designing Developer