100+ CSS Resources For Web Designers And Developers

by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool

A serious web designer/developer must call for a skill to write good CSS. CSS is simple, very easy to learn but very powerful language. Once you learn it you might amazed of its ability.

In case you are not familiar with CSS, here’s a quick intro:

“CSS is a special language used to style HTML content. CSS defines how HTML elements will be displayed — color, size, position, border, background, etc.”

© ClickHelp Team

Today I’ve gathered a serious set of CSS resources to help you learn. It’s divided into several categories: Learning Tutorials, Sites and Books, References and Cheatsheets, Tutorials and Techniques, Templates and Frameworks, Galleries and Showcases, Tools and CSS-Specific Blogs and News Sites.

Learning Tutorials, Sites and Books

Sites: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, A to Z CSS, Dash, The Hello World, Khan Academy, HTML5 from Scratch, Sitepoint, Usersnap

Books: HTML & CSS, After Hours Programming — CSS Tutorial

• Chris Coyier’s basic HTML and CSS video tutorial (62 MB) — A must watch video for absolute beginners. It teaches you everything from picking up a text editor, writing your fist HTML page and using CSS for styling.
• Creating a Global Style Sheet — You don’t need different CSS file for different pages, always create just one Global CSS file for all your webpages. Global style sheets can be applied either across your entire site, or across a subset of pages, and doing so means that you only need to update one or two files when you need to make a style change.
• CSS Basics — Stuck in the world of nested tables and deprecated markup? Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways. Learn basics of CSS chapter by chapter online or download all 18 chapters of CSS Basics in one downloadable printable PDF file.
• Cascading Style Sheets (CSS) Tutorial — Learn the usage of CSS, defining font size, margins and padding. Identify the HTML elements via id and class attributes.
• CSS Tutorial — More CSS tutorials here, from lesson 1 to 16 contains brief introduction and indepth tutorial about CSS, learn from using colours to floating elements.
• HTML & CSS for Beginners — How to set up your HTML webpage, create headings and paragraphs, add lists, change font size, color and type using CSS.
• Learn HTML & CSS in one easy to use guide. — Simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.

References and Cheatsheets

• CSS Property Index — An alphabetical listing of every CSS property.
• CSS Shorthand Guide — A cheatsheet covering basic CSS shorthand formats.
• CSS Cheat Sheets — Two cheat sheets from About.com — one basic and one for CSS layouts.
• Listamatic — This site offers up examples of how to use CSS to create radically different list styles.
• Beginner’s Guide from a Seasoned CSS Designer — This is a huge resources list for CSS beginners.
• 5 Tips for Organizing Your CSS — This article offers five really useful methods for keeping your stylesheets better organized (and, therefore, easier to edit later).
• My 5 CSS Tips — A collection of five simple tips for creating better CSS.
• Quirks Mode and Strict Mode — A guide to quirks mode and strict mode in modern browsers.
• CSS Cheat Sheet (V2) — A single-page CSS reference that lists all of the CSS 2.1 selectors.
• Core CSS: Part 1 — A 6-page reference guide for basic CSS elements from Refcardz.
• CSS Shorthand Cheat Sheet (PDF) — A reference sheet for CSS shorthand format.
• Using CSS (Cascading Style Sheets) — A basic guide to CSS, including the benefits of using CSS.
• 5 Ways to Instantly Write Better CSS — Some tips for writing good CSS that’s both efficient and effective.
• Optimizing Your Website Structure for Print Using CSS — A guide to creating stylesheets for print.
• PrintStylesheets — Another guide to creating print stylesheets.
• CSS Typography: Contrast Techniques, Tutorials, and Best Practices — A great collection of CSS typography resources.
• Powerful CSS Techniques for Effective Coding — A collection of CSS techniques, ideas, and solutions for better CSS coding.
• Resetting Your CSS Styles with CSS Reset — A complete guide to resetting styles.
• Structural Naming Convention in CSS — An article about naming elements based on what they are instead of where they are or how they look.
• Improving Code Readability With CSS Styleguides — An article covering five techniques you can use to make your code more maintainable and manageable.
• 70 Expert Ideas for Better CSS Coding — A collection of expert tips for improving your code.
• CSS Float Theory: Things You Should Know — A guide to understanding floats in CSS.
• Complete CSS Guide — A huge resource covering virtually every part of CSS.

• Typographic Contrast and Flow — An article outlining the basics of creating good type with sufficient typographic contrast in CSS.
• How to Size Text in CSS — A thorough guide to CSS text sizing.
• CSS Cheat Sheet — A very complete web-based CSS cheat sheet.
• 13 Training Principles of CSS Everyone Should Know — A list of basic CSS conventions you should be aware of.
• Resource Guide — This is the CSS resource guide from CSS Zen Garden.
• CSS Beauty — A site offering up CSS news, resources, and a gallery.
• Using CSS Shortcuts — A reference guide to some basic CSS shorthand.
• Web Developer’s Handbook — This is a massive collection of CSS and other resources, including showcases, tools, and more.
• Designing on a Dime: 100 Freebie CSS Resources — A large collection of CSS resources, including articles, tutorials, layouts, and more.
• 15 CSS Properties You Probably Never Use (but perhaps should) — This article covers fifteen often-overlooked CSS properties that many designers might not even know exist.
• 10 Principles of the CSS Masters — A collection of great principles and guidelines from some of the masters of CSS.
• CSS Specificity: Things You Should Know — A guide to CSS specificity, one of the most difficult CSS concepts to grasp.
• Solving 5 Commons CSS headaches — A guide to dealing with CSS issues like IE6’s double-margin bug and ineffective styles.

Tutorials and Techniques

• 20 Useful Resources for Learning About CSS3
• CSS3 Unleashed — Tips, Tricks and Techniques

• 20 Very Useful CSS3 Tutorials
• CSS3 Exciting Functions and Features: 30+ Useful Tutorials
• CSS from the Ground Up — This is a very basic tutorial for getting started with CSS that walks you through creating your first basic web page with CSS. It assumes that the person going through the tutorial has little or no knowledge of how to code a website and is a great resource for beginners.
• 53 CSS Techniques You Couldn’t Live Without — This is a huge collection of CSS techniques for everything from menus to forms to print stylesheets.
• CSS Drop Shadows — A tutorial on how to create drop shadows on images using CSS.
• Selectutorial — CSS Selectors — A basic guide to CSS selectors and how they work.
• CSS Navigation Techniques — A collection of 37 different navigation designs using CSS.
• CSS Techniques I Use All the Time — A collection of CSS techniques Christian Montoya finds extremely valuable.
• CSS Techniques Roundup — 20 CSS Tips and Tricks — A collection of CSS techniques including rounded corners and CSS popups.

• CSS Tips and Tricks — A collection of useful, basic CSS techniques.
• Master Stylesheet: The Most Useful CSS Technique — A master stylesheet used for clearing and resetting browser defaults.
• Showing Hyperlink Cues with CSS — A quick tutorial for adding link-type icons using CSS that’s compatible with IE7, Safari, and Firefox.
• Ten CSS Tricks You May Not Know — Covers tips like CSS font shorthand, image replacement, and vertical alignment with CSS.
• Ten More CSS Tricks You May Not Know — This article covers things like block vs. inline elements, setting a minimum page width, and invisible text.
• Turning a List into a Navigation Bar — A great tutorial on creating a nav bar from a styled list.
• Turning Lists Into Trees — How to create a multi-level unordered list in the form of a document or page tree.
• Web Page Reconstruction with CSS — How to rebuild a webpage with a CSS layout.

• Advanced CSS Layouts: Step by Step — A step-by-step tutorial for creating an advanced 3-column layout.
• Creating a CSS Layout from Scratch — A complete guide to building a CSS-based site from the ground up.
• CSS Tutorial — A complete tutorial from W3Schools.
• Stylesheets — Another very complete CSS tutorial collection.
• Fancy Paragraphs with CSS — A tutorial to create specialized paragraph formats.
• Even More Rounded Corners with CSS — A technique for creating rounded corners that supports PNG and alpha transparency.
• Uberlink CSS List Menus — A tutorial for creating a nav bar that behaves like an image swapping menu but only uses two images and highlights the current page.
• How to Add Variables to Your CSS Files — A guide to applying variables to CSS using PHP and Apache’s URL rewrite.
• 15+ Techniques and Tools for Cross Browser CSS Coding — This article covers more than 15 tips for creating cross-browser compatible CSS code.
• CSS Centering — Fun for All! — A guide to CSS centering in layouts, including centering liquid layouts.
• Absolute Positioning Inside Relative Positioning — A guide to positioning child elements absolutely within a relatively-positioned parent element.
• Faux Absolute Positioning — A guide to a positioning approach that combines the best attributes of both float and absolute positioning.
• Vertical Align for Navigation Lists with Multiple Lines — A guide to aligning lists that use the floated box approach.

• Top 10 CSS Buttons Tutorial List — A collection of ten of the best tutorials for creating CSS buttons.
• Mountaintop Corners — Creating rounded corners with CSS.
• CSS Rounded Corners Roundup — A collection of rounded corner techniques and tutorials.
• CSS Tricks for Custom Bullets — A guide to creating custom styles for bullets with CSS.
• CSS Swag: Multi-Column Lists — A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns.
• Improving Link Display for Print — Shows how to include link URLs in printouts of your pages after the link anchor text.
• Advanced CSS Menu Trick — A really cool advanced menu with a blur effect built with CSS.
• CSS Menus — A tutorial on creating menus from nested lists with CSS2 and no JavaScript.
• CSS Tabs Menu with Dropdowns — A tutorial for creating a tabbed dropdown menu with CSS.
• Advanced CSS Menu — A tutorial for creating a really great CSS menu from WebDesignerWall.

• Animated Horizontal Tabs — A tutorial for creating horizontal menu tabs that animate on rollover.
• CSS Graphic Menu with Rollovers — A great tutorial for creating a CSS menu with a rollover effect.
• Hybrid CSS Dropdowns — A tutorial on how to create CSS dropdowns that degrade gracefully and are well-structured, among other things.
• Beginner’s Guide to CSS — A complete guide for those new to CSS.
• Getting Started with CSS: A Practical Exercise — A very basic guide to getting started with CSS.
• How To: CSS Large Background — A tutorial for working with large backgrounds with CSS.
• The Highly Extensible CSS Interface — A complete tutorial for creating highly customizable and adaptable CSS websites.
• Using CSS to Do Anything: 50+ Creative Examples and Tutorials — A collection of more than 50 tutorials for creating unique CSS layouts.
• Quick and Easy CSS Development with Firebug — A guide to using Firebug to improve your web designs.
• 10 Examples of Beautiful CSS Typography and How They Did It… — Offers up great examples of CSS typography along with tutorials on how to create each.

• 16 Usable CSS Graph and Bar Chart Tutorials and Techniques — A collection of tutorials for creating CSS-based charts and graphs for data visualization.
• Better Pull Quotes: Don’t Repeat Markup — A guide to creating pull quotes that don’t include any unnecessary, repeated markup.
• CSS Gradient Text Effect — A tutorial for creating text gradients for your headings.
• 43 PSD to XHTML, CSS Tutorials Creating Web Layouts and Navigation — A huge list of tutorials for turning your Photoshop designs into valid CSS/XHTML files.
• CSS Image Maps — A tutorial for creating image maps with CSS and XHTML.
• Fluid Grids — A guide to creating fluid grid-based layouts.
• How to Debug CSS — A tutorial of debugging techniques for CSS.
• 10 Challenging But Awesome CSS Techniques — A guide to some advanced CSS techniques that are well-worth learning.
• 50+ Nice Clean CSS Tab-Based Navigation Scripts — A great collection of tabbed navigation using CSS.
• 30 Exceptional CSS Techniques and Examples — A great collection of really cool CSS effects, including a hoverbox image gallery, a sticky footer, and a CSS-only accordion effect, among others.
• 101 CSS Techniques of All Time Part 1 — Part 2 — Another huge collection of great CSS techniques with tutorials for each.
• Dead Centre — A brief tutorial on how to position something in the center of a browser window (both vertically and horizontally).
• Liquid Layouts the Easy Way — A complete tutorial on creating liquid CSS layouts.

Templates and Frameworks

• The 1 Kb CSS Grid — This is probably the simplest and most compact grid system out there, but includes a tool to customize the grid prior to downloading.
• CSS Zen Garden — CSS Zen Garden is an HTML and CSS framework made to showcase the variety of designs that can be created using CSS. In addition to the framework, there are tons of templates and themes available.
• Perfect Multi-Column CSS Liquid Layouts — A collection of liquid layouts that are iPhone compatible.
• 960 Grid System — A CSS grid system based on a 960-pixel wide basic layout.
• Free CSS Templates — A site offering more than 200 CSS templates released under the Creative Commons Attribution 2.5 license.
• Nice and Free CSS Templates — A dozen templates to get you started with CSS-based designs, including a dynamic centered box, four dynamic columns, and fixed box total centered designs.
• Little Boxes — A collection of CSS files for a variety of layouts.
• Prototyping with the Grid 960 CSS Framework — A guide to creating website mockups using the Grid 960.
• Prototyping a Magazine-Style Home Page Template with the Blueprint CSS Framework — A very valuable guide for creating magazine and grid-type layouts with Blueprint.

Galleries and Showcases

• CSS Stars — A gallery offering up a few dozen CSS-based designs for your perusal.
• CSS Based — An enormous CSS gallery with thousands of designs.
• CSS Drive — A categorized CSS gallery.
• CSS Mania — A CSS gallery that’s been around for five years.
• CSSelite.com — A categorized gallery of CSS designs.
• CSS Creme — A huge gallery of sites sortable by color, category or designer that also includes tutorials and news.
• csswebsite — A gallery that lets you filter by category, date, or color.
• 40 Beautiful Dark CSS Website Designs — A gallery post offering up some great dark designs built with CSS.
• Best of CSS Design 2008 — Another gallery post showcasing the best CSS designs of 2008.
• CSS Beauty Gallery — A CSS gallery with entries listed chronologically. The include designs from 2004 to the present.

Tools

• Firebug — A Firefox plugin that lets you view and edit CSS and other code right within Firefox.
• Aardvark — A Firefox extension that lets you see each HTML element and class or id.
• CSSViewer 1.0.3 — A Firefox extension that lets you view CSS properties on any web page.
• GridFox — A Firefox extension for assisting in grid layout design by overlaying a grid on any website.
• CodeBurner — A plugin for Firefox or Firebug that makes HTML and CSS reference material available in your browser.
• IzzyMenu — A free CSS menu creator that supports the creation of DHTML drop down sub-menus.
• Spanky Corners — A rounded corner box generator.
• CleanCSS — A CSS formatter and optimizer.
• CSS Browser Selector — A useful tool for empowering CSS selectors based on the visitor’s browser.
• CSS Compressor — A CSS file compressor.
• CSS Layout Generator — A simple, online CSS generator that creates a basic layout framework.
• CSSTidy — An open-source, downloadable CSS parser and optimizer.
• CSS Drive CSS Compressor — A CSS compression tool that has a basic and an advanced mode, depending on your needs.
• Tabifier — Adds indents to your code files.
• CSSFly — A browser-based CSS and XHTML editor that works in real-time.
• List-O-Matic — A tool for creating list-based navigation menus with CSS.
• Markup Maker — Creates a valid XHTML/HTML framework document with the page IDs you enter.
• CSSMate — An online CSS editor.
• CSS Type Set — A CSS typography generator.
• Construct 0.5 — A visual tool for creating layouts based on the Blueprint framework.
• PXtoEM.com — A pixel to EM size converter tool.
• CSS Editors Reviewed — A collection of reviews of some of the more popular CSS editors.
• YAML Builder — A visual tool for creating YAML layouts.
• Gridinator — A CSS grid layout builder.
• List of CSS Tools — A huge list of CSS tools for everything from fonts to optimizers.
• 50 Extremely Useful and Powerful CSS Tools — A list of some great CSS tools, along with a bit about each.

CSS-Specific Blogs and News Sites

• CSS-Tricks — A blog devoted to CSS from Chris Coyier.
• Ultimate CSS — While it hasn’t been updated in a few months, this blog still offers some great archived posts.
• CSS Help Pile — A growing collection of CSS tutorials and resources.

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors