CSS Design and TUTORIALS

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.

Csshook: css tips and guideline with examples

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.

TOOLS

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.