100+ CSS Resources For Web Designers And Developers

Bradley Nice
Feb 14, 2017 · 13 min read

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

Tutorials and Techniques

Templates and Frameworks

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.


  • 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

Level Up!

Stories for technical writers, web developers and web designers. It's time to level up your skills!

Bradley Nice

Written by

Content Manager at https://medium.com/level-up-web 👈. I write about web design, web development and technical writing. Follow me on Twitter and Facebook

Level Up!

Level Up!

Stories for technical writers, web developers and web designers. It's time to level up your skills!