Mastering CSS is one of the most important factors which will help you to become a successful web designer. Once you have this skill securely tucked under your belt, the possibilities for your web design career are endless.

If you can envision it, you can do it with CSS.

Mastering the techniques of CSS can take time and dedication from even the most patient designer. Here we have sourced more than 50 different resources to help you become a CSS pro.

CSS Tutorials

13 Excellent Tools and Systems for CSS Grid Based Layouts A roundup of 13 excellent tools and systems for CSS grid based layouts.

Mastering CSS Coding: Getting Started – The fundamental properties and capabilities of CSS

12 CSS Tools and Tutorials for Beautiful Web Typography Achieving beautiful typography with CSS

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 Exciting Functions and Features: 30+ Useful Tutorials – More than thirty tutorials for learning to use some of CSS3’s more interesting new features.

Create a Social Media Sharing Menu Using CSS and jQuery In this tutorial you will learn how to create a social media share menu using CSS and jQuery.

Snazzy Hover Effects Using CSS In this tutorial, you will learn how to create flexible advanced hover techniques using CSS2.1 properties.

HTML Dog CSS Tutorials HTML Dog is a tutorial website dedicated to teaching XHTML and CSS best practices.

Style Master CSS tutorial A very good place to get a broad overview of what CSS is and what you can do with it.

Solving 5 Common CSS Headaches – In this article, you will discover five of the most head thumping issues that you’ll encounter when building web applications as well as each solution

References & Style Sheets

CSS Basics CSS Basics cover all the basics of CSS design.

CSS Property Index – An alphabetical listing of every CSS property.

456 Berea Street – CSS category A List of over 300 CSS related posts, featuring tutorials, techniques and references.

CSS Shorthand Guide – A cheatsheet covering basic CSS shorthand formats.

CSS Help Sheet A well structured CSS overview

CSS Shorthand Cheat Sheet Useful reference of CSS elements that can be easily forgotten.

CSS3.com A thorough reference of CSS properties, with examples.

5 Simple CSS Tricks – Five really simple but effective CSS tricks

15+ techniques and tools for cross browser CSS coding – here is 15+ tools and techniques for crossbrowser CSS development.

Getting Into Good Coding Habits – This article offers some best-practices for your CSS coding.

Optimizing Your Website Structure for Print Using CSS – A guide to creating stylesheets for print.

53 CSS Techniques You Couldn’t Live Without A List of 53 CSS-based techniques you should always have ready to hand if you develop web-sites.

Are You Making These 10 CSS Mistakes? –   Discover these most common CSS mistakes and how you can avoid making them.

Float Containing Rules By Browser – A helpful chart that “shows which rules cause a container to clear its floats in each of the main browsers.

CSS Roundups

100 Freebie CSS Resources – A guide of 100 of the best CSS resources on the web

Top 10 CSS Buttons Tutorial List – A collection of ten of the best tutorials for creating CSS buttons.

CSS Rounded Corners ‘Roundup’ – A collection of techniques to create boxes with rounded corners using CSS.

Using CSS to Do Anything: 50+ Creative Examples and Tutorials – A collection of more than 50 tutorials for creating unique CSS layouts.

101 CSS Techniques Of All Time- Part 1 – A round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at!

101 CSS Techniques Of All Time- Part2 – Part 2 of the 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs.

16 Usable CSS Graph and Bar Chart Tutorials and Techniques – Have a look at these tutorials and techniques to help you create your own graph or bar chart using CSS

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.

26+ CSS Galleries to Follow on Twitter – A great guide to CSS galleries worth following on Twitter.

CSS Galleries

CSS Design Yorkshire – Gallery of over 4,500 bloomin’ good web designs from Yorkshire, England and the rest of the world.

Best CSS Vault – CSS Design Gallery

CSS Scoop – CSS scoop is your resource for the freshest designs, as well as design news from “The Scoop“. Get inspired!

The Best Designs.com – The Best Designs recognizes the best Flash and CSS web sites from around the world.

CSS Nature – Showcasing the best website designs worldwide

Divine CSS – The Divine CSS website showcases some of the world’s best designed websites (Flash & CSS) from around the world.

Design Bombs – CSS Web design gallery which also features some great design resources

Tools

CSS Validator –  CSS Validator is a Mozilla Firefox extension which Validates a page using the W3C CSS Validator.

Grid Designer – Create complex grid layouts quickly with this easy to use tool.

Firebug – A Firefox plugin which lets you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.

GridFox – A Firefox extension for assisting in grid layout design by overlaying a grid on any website.

CSS Layout Generator – This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer.

Em Calculator – Converts pixel sizes to em sizes.

CSS Rounded Box Generator is a tool to generate HTML and CSS for rounded corner boxes.

CSSEdit – CSS Editor for Mac OS X 10.2 or higher.

Coffee Cup Stylesheet maker – Program for PCs for creating and editing style sheets.

CSS Text Wrapper – The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Are you already using any of these tools and resources & which ones have we missed? Have your say in the comments area.

About The Author:

Michelle Kirkbride

Michelle Kirkbride is a web developer, she currently lives in Yorkshire, UK with her two beautiful children and loving partner. She spends far too much time at her computer and is currently addicted to her work. Michelle Kirkbride the founder of Kaplang is also a business Mentor with D100, a Success Doncaster mentoring programme run by Deloitte and funded by the Doncaster Council.