A guide to CSS

View on Github

CSS is a broad topic as the styling language is more complex than it appears at the surface. The more modern additions of grid, flexbox, and various animation tools (not to mention preprocessors!) has made the topic difficult to sum up in a guide such as this.

That said, I have selected the courses, articles, and other resources that I've found most helpful or return to on a regular basis.

Basic Introductions

CSS Basics

"You’ve heard the buzz about the separation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place!"

Learn CSS in 20 Minutes

"In this video we will cover everything you need to know to get up and running with CSS in only 20 minutes."

How To Learn CSS

"You don’t need to commit to memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use."

Flexbox

Flexbox Froggy

"Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!"

Grid

CSS GRID.

"Learn CSS Grid with Wes Bos in 25 pretty good videos"

Animation

Organization

Methods to Organize CSS

"Developer Ben Frain once remarked that it's easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem."

CSS At __

"A collection of styleguides or approach to CSS at different companies"

Preprocessors

CSS preprocessor

The MDN glossary definition, with a few links to the most popular preprocessors.

SCSS & Sass

A thorough overview of SCSS and Sass, arguably the most widespread preprocessor.

Additional Resources

CSS Tricks

This is probably the most premiere source for all things CSS.

CSS Protips

"A collection of tips to help take your CSS skills pro"

Batificity

"Not the css specificity guide you deserve, but the one you need right now."

Relearn CSS layout

"If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS."

  • Building tools that are useful, engaging, and leave the world a little bit better than when I found it.