250+ Resources to Help You Become a CSS Expert
CSS is the second-most-important thing you can master when it comes to web design, right after HTML.
And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers).
If you can imagine it, it’s likely someone has already figured out how to do it with CSS.
Below are more than 250 resources for mastering CSS. While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd.
30 Essential CSS3 Resources – A roundup of 30 great tutorials, tips, and other resources for what’s new in CSS3.
20 Useful Resources for Learning About CSS3 – A great collection of CSS3 tutorials.
CSS3 Unleashed—Tips, Tricks and Techniques – A huge roundup of CSS3 resources broken down by category.
20 Very Useful CSS3 Tutorials – Another rundown of good tutorials for learning the new capabilities of CSS3.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials – More than thirty tutorials for learning to use some of CSS3′s more interesting new features.
References and Cheatsheets
CSS Property Index – An alphabetical listing of every CSS property.
Cascading Style Sheets Level 2 Revision 1 – This is the official specifications of CSS 2.1 from the World Wide Web Consortium.
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 resource list for CSS beginners.
CSS: Getting Into Good Coding Habits – This article offers some best-practices for your CSS coding.
5 Tips for Organizing Your CSS – This article offers up 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.
Playing Nice with the Other CSS Kids – A guide to writing maintainable CSS.
Squeaky Clean CSS – Another guide to creating maintainable, minimalist CSS.
Quirks Mode and Strict Mode – A guide to quirks mode and strict mode in modern browsers.
CSS Basics – A complete online guide to CSS coding in book form.
CSS Cheat Sheet (V2) – A single-page CSS reference that lists all of the CSS 2.1 selectors.
Will the Browser Apply the Rule(s)? – A chart showcasing which CSS hacks and rules are supported in which browsers.
CSS Cheatsheet – A two-page quick-reference guide for CSS2.
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.
GoSquared CSS Help Sheet (PDF) – A quick-reference guide to CSS basics.
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.
Creating Sexy Stylesheets – A great guide to creating cleaner, better-structured, and easier-to-maintain stylesheets.
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.
Examples and Tips for Great HTML/CSS Formatting – A great collection of tips for creating better-structured CSS.
Resource Guide – This is the CSS resource guide from CSS Zen Garden.
CSS Vault Resources – A large collection of resources for all sorts of CSS techniques, tutorials, and more.
CSS Beauty – A site offering up CSS news, resources, and a gallery.
CSS Cheat Sheet: Inheritance, Cascade, Specificity – A printable quick-reference guide to which properties inherit (and those that don’t), how the cascade works, and the basics of specificity.
CSS Quick Reference Guide – A page offering up all the basic CSS measurements, properties, values, selectors and media types.
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
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.
Attach Icons to Anything with CSS – Shows how to use CSS selectors to add an icon to any bit of HTML.
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.
Sample CSS Page Layouts – A collection of step-by-step layout tutorials.
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.
Unordered List Rollover Gallery – How to create an image gallery using an unordered list and rollover technique.
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.
Forms Markup and CSS – A guide to form styling with CSS.
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.
Single Image Multi Replacement – A technique that uses a single image to replace more than one heading.
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.
Iconize Textlinks with CSS – A technique for adding file-type and other icons to your links.
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 Slicing Guide – A complete tutorial for slicing your design files to create standards-compliant CSS and XHTML sites.
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.
Learn CSS Positioning in Ten Steps – A handy tutorial to teach you the basics of the often-confusing CSS positioning.
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.
Snook’s Resizable Underlines – A tutorial for creating resizable underlines that stretch to fit the width of an entire column (without justifying text).
Resizable Image Example – Create resizable images that increase and decrease in size based on the surrounding text size.
Mountaintop Corners – Creating rounded corners with CSS.
CSS Rounded Corners Roundup – A collection of rounded corner techniques and tutorials.
Fun with CSS Shapes – A screencast showing how to create shapes just using CSS (no images).
Unobtrusive Sidenotes – A technique for creating unobtrusive sidenotes within a webpage.
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 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.
CSS Sprite Navigation Tutorial – A tutorial for creating a menu using CSS sprites.
Hybrid CSS Dropdowns – A tutorial on how to create CSS dropdowns that degrade gracefully and are well-structured, among other things.
CSS Menus v2 – Create a dynamic menu using CSS and jQuery that’s cross-browser compatible.
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.
4 Uber Cool CSS Techniques for Links – A collection of great link-styling techniques.
8 Premium One Line CSS Tips – A collection of single-line CSS solutions, including vertical centering, preventing line breaks in links, and removing active link borders.
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.
CSS Pull Quotes – Another tutorial for creating pull quotes with CSS.
Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML – A collection of tutorials for creating CSS from Photoshop designs.
20 Ultimate CSS Tutorials That Will Help You Master CSS – A great collection of twenty easy-to-understand tutorials for creating tricky CSS effects.
19 CSS Menu Tutorials to Spice Up Your Web Designs – Offers some great options for menus, with instructions for each.
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.
9 Top Essential Skills That Every Web Designer Should Learn – A collection of must-know CSS techniques, including the basics of creating CSS layouts and how to style forms.
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.
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.
Colored Boxes—One Method of Building Full CSS Layouts – A great step-by-step tutorial covering one method of creating a CSS layout from the ground up.
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.
Layouts.IronMyers.com – A collection of layouts available in various widths (including fluid).
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.
The Layout Reservoir – A few simple CSS layouts.
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.
A Detailed Look at the 960 CSS Framework – A comprehensive sites to building websites with the 960 Grid System.
Fluid 960 Grid System – Templates for creating fluid layouts based on the 960 Grid System with either 12 or 16 columns. It also includes templates for fixed layouts.
Blueprint CSS – A CSS framework for creating grid-based designs.
BlueprintCSS 101 – A basic guide to using the Blueprint framework.
CSS Boilerplate – A simple, semantic CSS framework.
YAML – Yet Another Multicolumn Layout. A standards-based XHTML/CSS framework.
Ruthsarian Layouts – This site offers up a series of CSS-based layouts that are royalty-free and copyright-free.
Layout Gala – This site offers up forty different CSS-styled HTML templates for creating a variety of different website layouts.
Dynamic Drive CSS Layouts – Another site offering some basic CSS templates for two- and three-column, liquid and fixed layouts.
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.
Open Designs – A collection of thousands of free CSS and XHTML templates from around the world.
CSS Tinderbox Frameworks – CSS Tinderbox offers a ton of great CSS frameworks, including some WordPress frameworks, fixed and flexible templates, and even full open source themes.
The Only CSS Layout You Need (?) – This site offers a template for ten different CSS layouts all based on the same HTML.
Little Boxes – A collection of CSS files for a variety of layouts.
Three Column Layouts – A collection of 3-column layouts from all over the web.
Faux Column CSS Layouts – A collection of 42 fixed-width CSS layouts with faux columns.
Layout Packs – A set of fluid-width CSS layout frameworks (it’s the third download on the page).
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.
CSSEasy.com – A collection of basic CSS layouts, including both fixed and fluid options.
Tripoli – A generic CSS standard that resets and rebuilds browser standards for stable, cross-browser site rendering.
BlueTrip CSS Framework – A CSS framework that claims to combine the best aspects of Blueprint, Tripoli, Hartija, 960 Grid System, and Elements.
Elastic CSS Framework – A framework for simplifying the creation of elastic, fixed, or fluid layouts.
SenCSs – A framework that focuses on creating sensible styling for repetitive parts of your CSS.
Content with Style – A more advanced CSS framework that includes pre-written and tested components.
Typogridphy – A grid framework based on the 960 Grid System for creating typographically-pleasing grid layouts.
The Golden Grid – Another grid-based CSS layout framework based on a 6/12 grid system and a 970 pixel main width.
Elements CSS Framework – A lightweight, easy to use CSS framework.
Galleries and Showcases
CSS Stars – A gallery offering up a few dozen CSS-based designs for your perusal.
Didloo Showcase – Another gallery featuring more than sixty CSS-based designs.
CSS Based – An enormous CSS gallery with thousands of designs.
CSS Drive – A categorized CSS gallery.
CSS Gallery 2.0 – Another CSS gallery categorized by site type with a couple thousand designs included.
CSS Remix – A huge collection of CSS designs.
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.
CSS Tea – A CSS design gallery sorted by industry.
26+ CSS Galleries to Follow on Twitter – A great guide to CSS galleries worth following on Twitter.
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.
Best CSS Gallery – A huge CSS gallery with more than 1,500 design examples.
CSS Vault Gallery – The CSS design gallery from CSS Vault. It includes designs dating back as far as 2003.
CSS Beauty Gallery – A CSS gallery with entries listed chronologically. The include designs from 2004 to the present.
StyleCrunch – A gallery of standards-compliant sites.
The CSS Gallery List – A listing of most of the major CSS design galleries out there.
CSSLeak – A CSS gallery with more than 1,400 entries.
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.
CSS Validator – A Firefox plugin that validates your CSS based on the W3C CSS Validator.
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.
Em Calculator – Converts pixel sizes to em sizes.
IzzyMenu – A free CSS menu creator that supports the creation of DHTML drop down sub-menus.
CSS Buttons – A downloadable button creator.
Spanky Corners – A rounded corner box generator.
Spiffy Box – Another generator for creating boxes with rounded corners.
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.
The CSS Color Extractor – This tool will extract all the colors from a chunk of CSS code and display those colors for you.
CSS Rounded Box Generator – An online tool to create rounded corners with CSS.
CSS Source Ordered Variable Border 1-3 Columned Page Maker – A page layout generator that creates an Ordered Variable Border template.
CSS SuperScrub – A tool that decreases the complexity and size of your CSS files.
Sky CSS Tool – A really powerful online tool for styling CSS selectors.
CSS Tab Designer – A downloadable tool for styling CSS tabs visually.
Simple CSS – A downloadable, free CSS authoring tool.
Stylesheet Generator – A multi-step stylesheet creator.
CSS Validation Service – The CSS validation tool from W3C.
Styleneat – A free online CSS organizer that works with direct CSS input, file uploads or stylesheet URLs.
CSS Menu Generator – A online generator that creates custom, cross-browser compatible CSS menus.
Webmaster Toolkit’s CSS Menu Generator – An online tool that creates the CSS and HTML files for your menus.
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.
CleverCSS – A markup language that’s based on Python for building cleaner and better-structured CSS.
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.
QrONE CSS Designer – An online CSS editor/generator.
Typetester – A tool that lets you compare CSS-styled type side by side (up to three styles at a time).
Typechart – A browsable collection of CSS-styled type that you can view as it would appear on a Mac or PC, with downloadable CSS code included.
Blueprint CSS Grid Generator – A tool for creating layouts based on the Blueprint framework.
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.
Grid System Generator – A grid layout builder that works with 960.gs, Golden Grid, 1Kb Grid, and a simple grid system.
List of CSS Tools – A huge list of CSS tools for everything from fonts to optimizers.
psd2css Online – A free tool that converts Photoshop designs to CSS files automatically.
50 Extremely Useful and Powerful CSS Tools – A list of some great CSS tools, along with a bit about each.
CSS Analyser – Checks your CSS against the W3C validation service while also checking the color contrast.
CSS-Specific Blogs and News Sites
CSS Tinderbox – CSS Tinderbox offers up tons of great CSS tips, resources, and free stuff (see the free frameworks they offer above).
CSS-Tricks – A blog devoted to CSS from Chris Coyier.
CSS3.Info – A blog covering updates and developments related to the CSS3 standard.
CSS Globe – A blog bringing daily posts about CSS, including tutorials, resources, and downloads.
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.
Don’t Meet Your Heroes – This site compiles the best CSS and web standards news from around the web in one place.
CSS How To – A blog devoted to teaching CSS, filled with useful tutorials and hints.
CSS Mania Blog – This blog focuses heavily on the finer points of CSS design.
CSS Vault – The CSS Vault blog covers tons of useful tips and tutorials.
Miscellaneous Downloadable Elements
CSS Candy Menu – A CSS drop-down menu available in a number of candy colors.
More Free CSS Navigation Menu Designs – Two collections of menus you can download.
CSS Mini Tabs (the Un-tab, tab) – Two different versions of a mini-tab navigation bar.
ADxMenu – A horizontal menu with dropdowns.
CSS Dock Menu – A downloadable CSS menu based on the Mac dock.
14 Free Vertical CSS Menus – A collection of free vertical menus.
Dynamic Drive CSS Library – A huge collection of CSS code you can download.
CSSPlay – A collection of CSS elements and layouts you can download, some of which are available for free commercial use.
CSS Tricks Downloads – A big collection of site elements you can download for free, with demos.
Compiled exclusively for WDD by Cameron Chapman.
Which tools do you use the most and which ones have we missed? Feel free to share your input in the comments area.