The Ultimate Guide to Learning CSS

KBall Jul 11, 2018

How do you learn CSS? CSS is a vast subject, with many different layers
to learn about covering all different aspects of manipulating the display of
elements on a page.

It is also an evolving topic, which sometimes makes it difficult to know

what to study. This article is intended to be a resource for learning,
finding the best resources around to learn each area of CSS.

Topics are arranged in an order that makes sense for learning from
scratch. So if you're brand new to CSS, you should be able to start at the
top and work downwards, gradually increasing your understanding.

If you have particular areas of CSS you want to brush up on, you can use
the table of contents to jump to them.

If you're looking for comprehensive "learn everything from a single

source" resources, you should jump down to comprehensive resources
and courses.

And finally, if you're looking for ways to stay up to date, the newsletters
portion at the very end will give you a number of options for continuing to
hear about the latest and greatest.

Affiliate disclosure: Some of the links on this page are affiliate links,
which means I may receive a commission if you decide to buy a product
or service I have recommended. But if youʼd prefer I didnʼt receive a
commission, thatʼs cool too. Just Google the vendorʼs site instead of
using my link.

Table Of Contents

CSS Selectors
CSS Box Model
CSS Layout
Styling Text with CSS
Styling Boxes with CSS
CSS Units
CSS Colors and Gradients
CSS Transitions and Animations
CSS Transforms
CSS Pseudo-classes and Pseudo-elements
CSS At-Rules (e.g. Media Queries)
CSS Specificity
CSS Preprocessors
CSS Naming Systems and Architecture
Common CSS Practices
CSS Walkthroughs and Examples
Comprehensive CSS Resources
CSS Frameworks
Free CSS Courses
Paid CSS Courses
CSS Newsletters

CSS Selectors
One of the key initial concepts in CSS is selectors and how they work.
From there you can move into advanced selectors and pseudoselectors,
as well as understanding the various types of properties you can
manipulate. But without selectors, you have no way to apply the things
you learn, so this is where you start.

Beginner Concepts: How CSS Selectors Work | CSS-Tricks

One of the best introductions to CSS Selectors, walking you through the
concept of selectors, how they work, and up through some
psuedoselectors and combining selectors.

Level up your CSS selector skills | LogRocket Blog

Thorough walkthrough of CSS selector options, including relationship
selectors, various types of wildcard selectors (starts with, ends with, etc)
as well as advanced pseudoselectors. Definitely worth a read through
and some experimenting.

CSS Box Model

At the root of understanding CSS and how to manipulate elements on

your page is the CSS box model. If you don't understand this, you won't
get very far with the more advanced concepts and will be consistently
frustrated by CSS.

Opening the Box Model | Shay Howe

Excellent introductory resource with well-done graphical explanations
and a step by step introduction of the properties that make up the box
model.

The box model | MDN web docs

The definitive resource, covering all different pieces of the box model
with interactive examples that you can tinker and play with.

CSS Layout

Once you have the ability to target html elements for styling, layout is the
next core concept to master. Layout involves manipulating how elements
lay out on the page. How much space do they take? Are they side by side
or on top of each other? How do you manipulate this to create exactly the
design you desire? This is an area of CSS that has changed and improved
dramatically over the last few years with Flexbox and CSS Grid, but some
of the fundamentals (flow and the box model) have remained the same.

Increasingly layouts can be done purely with CSS Grid and Flexbox, but
for those who still must support older browsers, grid systems built using
Flexbox or even floats are still useful.

Getting Started With CSS Layout | Smashing Magazine

An awesome guide for CSS newbies, but also for anyone who doesnʼt feel
like theyʼve mastered CSS layout or havenʼt been keeping up with all the
latest developments in CSS Layout. Takes you through the fundamentals
of flow on the web, layers in floats and positioning, and then goes
through Flexbox and Grid. Excellent.

The Ultimate Guide to Flexbox — Learning Through Examples | Free Code

Camp
CSS Grid has stolen a little bit of its thunder, but Flexbox was the biggest
innovation in browser layout in a decade, and continues to be a key piece
of modern layout techniques. This takes you through all of the various
properties with examples.

A Comprehensive Guide to Flexbox Alignment | Tutsplus

Perhaps less addressed than the "flex" sizing components of Flexbox,
alignment a key piece of the specification. Flexbox takes certain
alignment issues that have been problematic since the beginning of web
development and makes them trivial to solve.

Flexbox Froggy
Wonderfully whimsical game that lets you practice your flexbox skills by
positioning frogs on lilly pads. Hands down the best "learn by doing"
resource out there for Flexbox.
A Beginnerʼs Guide to CSS Grid | Free Code Camp
Great, simple, and very visual step by step guide to CSS Grid.

A Complete Guide to Grid | CSS Tricks

One of the most thorough online resources available for CSS Grid, shows
all of the grid related properties, their potential values, and visual
demonstrations of what all of those values do.

Best Practices With CSS Grid Layout | Smashing Magazine

CSS Grid has been around and being used long enough that weʼre
starting to see some best practices congeal. Rachel Andrew goes
through a set of them, informed both by her own experience (sheʼs one
of the foremost advocates and teachers of CSS Grid, and was involved
with the spec) and a survey of developers using grid.

Another Collection of Interesting Facts About CSS Grid | CSS Tricks

A set of lessons learned on how to use CSS Grid, some of the shorthand
properties, and ways to handle explicit and implicit rows and columns.
Filled with codepen-based examples, so you can dig in and tinker with
the code to your heartʼs content.

Grid Layout Cheatsheet | alsacréations

Simple printable cheatsheet for the basics of grid layout. Extremely
readable, perfect if you just want a onepager to have on your desk.

CSS Grid Garden

Another excellent learning game by the same developer as Flexbox
Froggy. Learn CSS Grid by positioning carrots in a garden.

How browsers position floats | meowni.ca

While many of us can now use Flexbox and Grid Layout for most of our
layouts, there are still sometimes situations where you need to use floats.
Or youʼre working with an old CSS codebase that has floats all over the
place. In those scenarios, itʼs super helpful to understand the guts of how
the browser treats floats. This is a great visual walkthrough of exactly
that, letting you click through to see progressively more ways floats will
get treated as you add new floating elements and clears.

Learn CSS Positioning in Ten Steps | BarelyFitz Designs

Step by step tutorial on CSS positioning. A thorough grasp on relative
and absolute positioning will give you some serious powers in
implementing components. If you don't understand these, you are in
danger of spending an awful lot of energy recreating something the
browser will do for you.

Z-Index Explained: How to Stack Elements Using CSS | FreeCodeCamp

Z-Index is one of the elements of CSS that seems like it should be
straightforward, but thereʼs all sorts of complications when you start
actually using it. Understanding the nuances, particularly the idea of a
stacking context, is key to making z-index your friend rather than staring
frustrated at your screen. This article does a great job of explaining.

Positioning | MDN web docs

The definitive resource on CSS positioning including Z-index and the new
position: sticky.

Whatʼs the Deal with Margin Collapse? | Jonathan Harrell

Margin collapse is a perennial issue when learning CSS layout, and it isnʼt
always easy to understand. This article does a great job of visually laying
out the different ways in which margins can collapse, so if you are a
visual learner definitely check this out.

Styling Text with CSS

One of the fundamental pieces of web styling is how we deal with text.
Paragraphs, headers, links, lists... text is one of the fundamental building
blocks of the web, and there are a myriad of ways to make it look good.

Fundamental text and font styling | MDN web docs

An excellent overview of the various tools in your hands when it comes to
styling text. Fonts, colors, sizing, decoration, and more. Start here.
The Definitive Guide To Styling Links With CSS | Smashing Magazine
Links are one of the fundamental building blocks of the web, and when
styling them it's important to not only know the tools at your disposal but
also think about the ways people use links. That's why this is such a great
guide - it goes through both the technical details and how you can style
links in different states, but also the design thinking behind how you
might want to.

Styling lists | MDN web docs

Lists are a fundamental part of displaying content on the web. Any time
you have an array of data, there's a very good chance you'll be interested
in displaying it as a list. While lists for the large part style like text, they
have some unique pieces as well that this goes through in great detail.

Using @font-face | CSS-Tricks

A thorough guide to using custom fonts on your website. Covers font-
face options for different levels of browser support, as well as
alternatives like @import.

Styling Boxes with CSS

The other fundamental building block of how things appear on the web is
boxes. As you learned above in the box model, everything in a webpage
is a box, so understanding the tools at your disposal for styling those
boxes is key.

How to add fun CSS backgrounds to your sites | Creative Bloq

One of the most powerful tools at your disposal to change how a box-like
element looks on the page is the background. Images, gradients, and
more - the possibilities are endless.

Styling Tables | MDN web docs

Tables are not very glamorous, but for displaying tabular data they are a
key part of your arsenal. This guides you through the options available to
you for making tables look good on the web.
Box-shadow, one of CSS3ʼs best new features | CSS3.info A thorough
introduction to box-shadows, breaking down the options available, what
properties like spread and blur actually do, and even teaching about
overlapping multiple box shadows.

CSS Outline | Tutorial Republic

While a lot of attention is paid to the border property, less is paid to the
outline property, which can be another powerful tool in your toolchest,
especially because they don't take up space in the box model the way
borders do.

Multiple Borders | CSS-Tricks

A number of the properties at your disposal to create multiple borders
around a box. Pseudoelements, outline, and box shadows.

CSS Filter Effects: Blur, Grayscale, Brightness And More In CSS! |

Sitepoint
Very step by step set of examples for how to use CSS filters. Keeps it
very basic and visual, showing you the possibilities.

filter | MDN web docs

The definitive source for CSS filters. Includes a number of examples, but
also documents thoroughly all the options available to you.

CSS Units

Anything that involves sizing, positioning, or shading something involves

units. We need to be explicit about how much we want to size, position,
or otherwise manipulate items in our page. TThis section goes through all
the units available to us as web developers.

In responsive web frameworks like ZURB Foundation, the tendency is to

use REMs for most sizing, but also to have functions available for
converting between units for when pixels are necessary.

CSS values and units | MDN web docs

An introduction to all of the different types of units in CSS. Pixels, rems,
ems, unitless values, degrees, seconds, percentages, hexadecimals and
more. Worth digging through for a big picture overview.

REM vs EM – The Great Debate | Zell

While pixels are probably the easiest unit to understand, creating
accessible and responsive websites requires the use of em and rem units.
This is the best introduction to these units I have seen, explaining in great
detail how the units are defined, what that means in real world use, and
the pros and cons of each.

A Look at CSS Viewport Units | Alligator.io

Viewport units arenʼt necessary very often, but there are a certain set of
problems where they are incredibly useful, in fact there are no
substitutes. If youʼre not already familiar with them, take a look through
this.

Calc() function with Use Cases | Pineco

Calc is one of the most useful general purpose tools in modern CSS
toolkits - this article breaks down some of the many ways you can use it.

CSS Colors and Gradients

The web has not one but 3 unique color systems, as well as a a number
of keywords and the ability to create complex gradients.

Color | MDN web docs

A thorough document explaining all of the different color coordinate
systems (hexadecimal vs rgb/rgba vs hsl/hsla) as well as color keywords.

CSS Gradients | CSS-Tricks

Great explanation of all the different types of gradients, what they look
like, and how they're supported across different browsers.

CSS Gradient
A visual tool for generating CSS Gradients. Test and tinker in real time,
and when you get one you like simply copy out the CSS.
How to add gradients to images with CSS ::after | Peter Ramsing
Gradients can also be useful for manipulating images and all sorts of
other good stuff. This shows how to do a nice gradient fade-out of an
background image using a gradient.

CSS3 Progress Bars | CSS-Tricks

Utilizing gradients to create beautiful progress bars.

CSS Transitions and Animations

Transitions and animations allow you to specify how elements change

from one style to another. This can be as subtle as a tiny microinteraction
on hover or as complex as a multi-step animation. These are key for
adding flavor and interactivity to your website. Changing between states
suddenly can be jarring, transitioning reduces user's cognitive load and
makes things feel natural.

CSS Transitions explained | Zell

Great step by step introduction to using CSS Transitions to animate your
elements.

CSS Transitions | CSS3 = Awesome

A good second article to read on transitions, once you understand the
core concept. Includes some great examples of varied timing functions,
and a thorough index of what properties can be transitioned.

An Introduction To CSS Keyframes Animation

While transitions are great, sometimes you need something a little bit
more fine-grained that lets you specify multiple steps to your animations.
Enter Keyframe Animations, and this article will show you how.

Animista: CSS Animations on Demand

A GUI for exploring and creating CSS-based animations. You poke
around, see the animations, tweak the parameters, and then export CSS
animation code ready to integrate into your project. Super cool, useful
both for learning and for ongoing development.
CSS Transforms

CSS Transforms allow you to shift and morph your elements in either 2d
or 3d space. Not satisfied with simple rectangular boxes, and you want to
create triangles? Chances are you'll be using transforms. They also let
you animate some aspects of elements in a high-performance way by
moving elements into their own layers and allowing you to GPU-
accelerate the animations. Very useful!

Transforms | Shay Howe

A great step by step introduction to the various types of CSS transforms
and what their effects are.

High Performance Animations | HTML5 Rocks

A look into the use of transforms for high performance animations.
Explains some of the steps involved in CSS rendering and why transforms
are helpful.

CSS Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are some of the most useful tools

in your toolchest as you start to level up your CSS skills. Pseudo-classes
allow you to target elements based on their state and relationship to
other elements, while pseudo-elements are "implicit" elements that live
within your elements, giving you new targets to manipulate.

This can let you do things like add icons to links or buttons, layer on
additional borders, or other complex visual tricks.

Learning To Use The :after And :before Pseudo-Elements In CSS |

Smashing Magazine
A thorough introduction to the :before and :after pseudo-elements,
which are by far the most commonly used.

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks

Once you've got the basics of pseudo-elements down you start looking
for opportunities to use them. This is an incredible roundup of the varied
ways designers and developers have found to take advantage.

Animating pseudo-elements | CSSAnimation.rocks

One item that isn't caught as much in the roundup above but is incredibly
powerful is the ability to use pseudo-elements to create fancy
animations. This gives you one example (a button that shimmers on
hover) but also breaks down how to do it.

Using pseudo-elements with CSS Grid | Codepen

Did you know that pseudo-elements are considered direct child
elements, and thus completely positionable and styleable via CSS Grid?
This makes for some really interesting possibilities, and this is a great
example of utilizing this tool to solve a common layout problem.

How CSS pseudo-classes work, explained with code and lots of diagrams
| FreeCodeCamp
Great introductory explainer to pseudo-classes, with visual diagrams and
step by step breakdown. If you're brand new to this, start here.

Meet the Pseudo Class Selectors | CSS-Tricks

A thorough index of all available pseudo-classes. Once you understand
how these things work in principle, read this to learn all the options
available to you.

CSS At-Rules (e.g. Media Queries)

Almost everything in CSS can be thought of as properties applied to

elements chosen by some form of selector, but there are a few
exceptions. So-called at-rules (rules starting with the @ character) allow
you to apply some additional behavior, doing things like specifying
charset, importing external resources, and scoping blocks of CSS based
on things like supported feature or device size. These rules (particulary
media queries) are at the core of Responsive web development -
development of pages and applications that "respond" to device size by
laying out differently.
The At-Rules of CSS | CSS-Tricks
An excellent introduction and overview of the different at-rules available
and what they enable you to do.

CSS Media Queries: Quick Reference & Guide | Alligator.io

Getting deeper into media queries, understanding how they work and
how you can apply them to change the way a page looks based on
screen type and size.

How To Write Mobile-first CSS | Zell

One of the most popular approaches to responsive design development
is "mobile first" - defining your layout by starting at the smallest screens
and then progressively enhancing them for larger screens. This is an
excellent introduction to how "mobile first" works in CSS.

CSS Specificity

Once you've started to become comfortable with the basics of CSS -

using it to change the layout and graphical features of your page, it is
time to learn how to use it well. Once of the most important concepts to
master as you start to dig into more advanced concepts is specificity -
how the browser decides what styles to apply where. This will be key in
understanding why and how different CSS naming systems and
architectures are designed the way they are.

Specifics on CSS Specificity | CSS Tricks

A great introduction to CSS specificity. What it is, how it works, how to do
specificity calculations. Short, to the point, and well, specific about the
details.

CSS Specificity: Things You Should Know | Smashing Magazine

A thorough overview of the concept of specificity. Goes a lot of detail
with many examples for practicing specificity calculations, and includes
an incredible list of resources to dive deeper.

Strategies for Keeping CSS Specificity Low | CSS Tricks

As CSS best practices have evolved, we've come to realize that the more
we can keep specificity low across our projects the better off we'll be. In
fact, many of the CSS naming conventions that have arisen have low
specificity as a fundamental principle. This is an introduction to strategies
for keeping specificity low.

Specificity in :not(), :has(), and :matches() | meyerweb.com

This has definitely tripped me up before. Specificity of pseudoclasses
follows some simple rules, but unless you know those rules you can
easily end up expecting one thing and running into something completely
different. This is a short and sweet article that will give you clarity.

CSS Preprocessors

The use of CSS preprocessors (primarily Sass aka SCSS) has become so
common that many developers (including the author) consider them
almost a part of CSS, talking about things that are a part of e.g. SCSS
while discussing CSS Architecture. Also, they make your life so much
easier... if you're not already, definitely consider switching to SCSS.

Why Sass | Alistapart

Explains some of the core value propositions of a compile to css
language, using Sass as a particular example.

Sass Basics | sass-lang.com

A guide to the basic features of Sass. This is where to start learning.

Sass control directives: @if, @for, @each and @while | TheSassWay

As you start using Sass more and want to create more reusable
components, mixins, and functions it's key to understand the control flow
primitives available to you.

Take your Sass skills to the next level with list-maps | CodeFellows
Another key Sass feature, especially for things like color palletes and the
like, is list-maps. Definitely worth reading into.

Learn LESS in 10 Minutes (or Less) | Tutorialzine

While much of the CSS world has standardized on Sass, there are still
quite a few people using Less as well, including the Semantic UI
framework. It's pretty similar in functionality to Sass, but if you want to
start with Less this is a good tutorial to do so.

Stylus
Stylus is another compile-to-CSS language that remains somewhat
popular. Those who particularly like terse syntax and don't mind
whitespace sensitivity should check it out.

PostCSS – A Comprehensive Introduction | Smashing Magazine

Less of a "compile to CSS" language and more of a framework for
developing CSS extensions (equivalent to what Babel is for JavaScript),
this is still a powerful tool to be aware of.

CodeKit vs. Prepros

Most compile-to-CSS languages require a build system, these days
typically built using Node.js. For those who are just getting started and
don't want to worry about Node.js, CodeKit and Prepros are two options
that will let you compile languages like Sass to CSS without having to
deal with Node.

CSS Naming Systems and Architecture

If you're not careful, it is easy to write complex, confusing, and

unmaintable CSS. That is why there has been so much work done
thinking about good, scalable CSS naming systems and architectures.
Understanding and sticking to these can be the difference between
loving and hating CSS.

An Introduction To Object Oriented CSS (OOCSS) | Smashing Magazine

While a majority of developers have gone beyond OOCSS and towards
BEM, it can still be a good first place to start thinking about naming
conventions and structuring CSS. OOCSS was one of the first low-
specificity naming conventions to arise in CSS, and is still a reasonable
naming convention for smaller sites.
BEM For Beginners: Why You Need BEM | Smashing Magazine
BEM is by far the most used CSS naming convention today. That said, it
took me a long time to come around to BEM originally - being an old-
school developer, and having come from a backend background way
back in the day, it seemed overly verbose and complicated. Once I
bridged over that initial impression, Iʼve been very happy with using BEM
for a wide variety of projects. What I appreciate about this article is it not
only explains what BEM is, but the reasoning behind many of the choices.
If Iʼd had those back when I was first learning about BEM, it might not
have taken me so long to decide to use it.

SMACSS
Similar to the role OOCSS played in kicking off new thinking around CSS
naming systems, SMACSS was one of the first big CSS architectural
systems, and is still one of the best documented ones. Even if you intend
eventually moving to a more modern architectural system like ITCSS, it
can be super helpful to read through the SMACSS system to deeply
understand the concept and why's around categorizing and
systematizing your stylesheets.

ITCSS: Scalable and Maintainable CSS Architecture | XFive Blog

ITCSS has a small but almost fanatical base of fans. Those who advocate
it highlight its scalability, maintainability, and how ITCSS codebases are a
joy to work with. The biggest challenge to adoption is the lack of good
available free documentation and educational material. This blog post is
one of the best I've found explaining it. For an example in code, check out
inuitcss.

ECSS
ECSS combines an architectural approach - organization via modules -
with a naming convention that takes BEM style naming conventions and
"turns them up to 11". Advocates of pure component-based styling will
find much to like in this approach.

The 80-20 Approach to Sustainable SCSS | ZenDev Blog

Iʼm a huge fan of the great strides weʼve taken in CSS architecture over
the last few years, allowing us to design really powerful systems that are
far more maintainable than CSS used to be, but this has come at the cost
of making CSS and SCSS sometimes seem intimidating to newcomers.
The vast majority of projects donʼt need anything super complicated, so
this post attempts to break down 2 quick decisions you can make that
will take you a long way towards sustainable SCSS without requiring deep
study or crazy complex systems.

Common CSS Practices

There are a number of pretty common practices - things like using a

reset and/or normalizing CSS, linting, and more that don't fit in any
particular bucket but are worth learning about.

Autoprefixer | CSS-Tricks
Autoprefixer is a must-have tool for modern CSS, letting you stop worring
about the different variations of properties across browsers and just
specify what browsers you want to support and let the tool automatically
handle it.

Lint your CSS with stylelint | CSS-Tricks

An introduction to linting for CSS with stylelint. Keep your styles working,
catch errors early, and enforce standards across your codebase!

Reboot, Resets, and Reasoning | CSS-Tricks

An explanation of the thinking behind resets, some of the history, and
some modern options.

About normalize.css | Nicolas Gallagher

A great description of what Normalize.css provides and the motivations
behind it.

CSS Modules and Related Technologies

One of the trends in larger companies and projects is towards total

programatic scoping of CSS. This has pros and cons, and occasionally
takes on the flavor of a religious war, but as in most technology decisions
the right choice depends on the context of project and team. These
approaches tend to sacrifice some core pieces of CSS (the cascade) in
order to gain other outcomes (total isolation of styles to a component).
This tradeoff tends to make sense for large teams working on very large
codebases, and less for smaller teams and smaller codebases.

What are CSS Modules and why do we need them? | CSS-Tricks

A great introduction to CSS Modules - what they are, how they work, and
how you might use them.

CSS at Scale: LinkedInʼs New Open Source Projects Take on Stylesheet

Performance | Linkedin Engineering
Another take on CSS modules by Linkedin, CSS-blocks leans into some
of the best of CSS while still focusing on component-oriented styles and
complete isolation.

CSS Walkthroughs and Examples

Sometimes rather than deep diving into a particular topic, it's more useful
to have a walkthrough of accomplishing a particular goal. Here are some
especially well done walkthroughs.

Styling buttons, the right way | florens verschelde

Very nice walkthrough of the thinking and the CSS that goes into creating
a well-styled, reusable component. In this case they take a button and
walk you through step by step: first applying a reset, building out basic
component styles, handling hover, focus, and active states, and finally
addressing browser quirks around sticky focus styling. I appreciate the
fact they show you the thought process throughout, so you can more
easily apply this approach to building your own components.

CSS Grid — Responsive layouts and components | Deemaze Writing Wall

A walkthrough on using CSS Grid to build a layout and make it
responsive, showing how to can use minmax, auto-fit, and auto-fill to add
quite a bit of responsiveness before you even think about a media query.
Drawing Images with CSS Gradients | CSS-Tricks
A super-detailed step by step tutorial that will have you drawing fancy
umbrellas, an iPhone, and even an animated radar all with CSS.

How to create a simple CSS loading spinner & make it accessible |

Codeburst
A step by step guide to creating a reusable scss mixin for loading
spinners that requires no image assets and is completely accessible.

Creating a Bar Graph with CSS Grid | CSS-Tricks

This article does a very nice job of using grid and CSS custom properties
to make a super cool bar graph, and brings you along with the thinking
the whole way.

Contextual styling with custom properties | Simurai

Great usecase and example of using CSS Custom properties to create a
mix-and-match theming system letting you apply themes per component
and location in the page.

Using CSS Clip Path to Create Interactive Effects | CSS-Tricks

Wow is this some cool stuff. Using CSS Clip path to create
programatically controlled effects on an image, using pure CSS.

Making The Transition From After Effects To CSS Transitions And

Keyframes | Smashing Magazine
Practical walkthrough of how to take animations designed in After Effects
and translate them into HTML and CSS.

Animating Border
You would think that something as conceptually simple as animating the
border on a button would be easy to do, right? But no… itʼs actually very
hard to do right. This article goes through the different approaches and
their pros and cons.

Comprehensive CSS Resources

Resources covering large swathes of CSS, not particular topics.

Caniuse.com
A key tool for determining browser support of any CSS feature. Not sure
if the nifty new CSS tool you want to use will work for your audience?
Caniuse can let you figure it out.

Comprehensive CSS Cheat Sheet + PDF | OnBlastBlog

A massive downloadable cheat sheet covering pretty much every css
property and what it's allowable values are. Great to print out and have
on your desk to help you find and remember properties as you're learning
them.

CSS Almanac | CSS-Tricks

An online, alphabetical almanac of CSS properties and keywords. Diving
into each one shows both descriptions of the property or keyword, but
also interactive examples built with codepen, browser support charts,
and links to additional information. An incredible resource.

CSS Frameworks

As you've probably gathered by this point in this article, there is a lot to

CSS, and lots of edgecases and tricks to learn. One of the best ways to
get most of those edgecases and tricks "for free" is to utilize a CSS
framework. One can consider these sets of components and best
practices packaged up for reuse. Some frameworks are focused on
particular design languages, while others are more flexible and
themeable, but they are all incredible resources to get you building great
websites faster.

Bootstrap
Bootstrap is the most popular CSS framework by a large distance. It
tends to be pretty opinionated and difficult to customize deeply, but is a
great place to begin.

Learn Bootstrap 4 in 30 minutes by building a landing page website |

FreeCodeCamp
This is a great one-stop tutorial that introduces you to many of the
features of the latest version of Bootstrap.

ZURB Foundation
Often described as a "designer-focused" CSS Framework, ZURB
Foundation places far more emphasis on being customizeable and
extensible than providing a polished UI 'out of the box'. Offers
tremendous customization simply by manipulating an SCSS settings file,
plus every component is built using reusable SCSS mixins and functions
that you can utilize to build your own customized components.

Semantic UI
A natural language-focused CSS framework with extensive theming
capabilities. A bit heavy-weight and challenging to break into subpieces,
but extremely powerful.

Learn Semantic
An extensive set of learning guides for Semantic UI.

Bulma
A compact, CSS-only framework that is excellent for those who find the
above frameworks too heavyweight and complex. Where Bootstrap,
ZURB Foundation, and Semantic all come with integrated JavaScript for
some components, Bulma only ships CSS and leaves any JavaScript
integration to the developer.

MaterializeCSS
An implementation of Google's Material Design as a CSS Framework that
does not have a dependency on any particular JavaScript framework.
(Note: There are also Material Design implementations in React, Angular,
and Vue.)

Free CSS Courses

Learn CSS | Codecademy

Requires a signup, but then gives you an interactive learning
environment, with 3 resizable windows with written instruction, a code
editor, and a rendered preview on the right. Has a very thorough set of
instruction, but doesn't really let you skip around between lessons, so
while it is great if you're starting from scratch folks who are already using
CSS and want to improve one or two specific topics may get frustrated.

freeCodeCamp
Optional login if you want to track your progress. Lets you pick and
choose lessons, but also has a beginning to end course on "Responsive
Web Design" that covers HTML as well as. Similar to Codecademy in the
interactive setup with multiple windows, but I think better because it lets
you pick and choose resources if you like.

What the Flexbox? | Wes Bos

Free 20-video course on mastering Flexbox. Videos are short, with the
first 13 focused on fundamentals and the last 7 as code-alongs. Requires
a registration with email.

Let's Get Griddy With It | Wes Bos

Free 25-video course on mastering CSS Grid. About 4 hours of total
video, with an initial focus on the fundamentals, and later transitioning
into building out example layouts. Requires a registration with email.

Paid CSS Courses

While there are tons of great free resources available, sometimes you get
waht you pay for, and these paid courses have a tremendous amount of
depth while guiding you step by step. Plus, I know that when I pay for
something it makes me way more likely to follow through.

CSS - The Complete Guide (incl. Flexbox, Grid & Sass) | Udemy
Starts from scratch and takes you through to advanced use. Has 3
separate tracks depending on your current skill level, and provides over
22 hours of video content and over 300 supplemental resources. One of
the instructors - Maximilian Schwarzmüller - is one of the top instructors
on Udemy, and for good reason. He's excellent at breaking things down
so you can understand no matter what your level of expertise.
Advanced CSS and Sass: Flexbox, Grid, Animations and More! | Udemy
For those already more advanced at CSS and wanting to truly become an
expert, this course offers 28 hours of video content for taking you from
intermediate to advanced. Organized around a series of projects, this is
the top-rated CSS course on Udemy with over 500 ratings. Truly high
quality stuff.

CSS Newsletters

The state of the art is constantly changing, and weekly newsletters can
be a great way to keep up with that change. Here's some of the top CSS
newsletters out there.

Friday Frontend
15 links each Friday with commentary, covering CSS, JavaScript, and
other important web topics and news. Published by KBall, founder of
ZenDev.

CSS Weekly
A weekly roundup of CSS focused articles, tutorials, experiments and
tools curated by Zoran Jambor.

CSS Layout News

A weekly collection of tutorials, news and information on all things CSS
Layout, published by Rachel Andrew, editor in chief at Smashing
Magazine.

Layout Land
Primarily used to keep subscribers up to date of new videos on the
Layout Land Youtube Channel, published by Mozilla Developer Advocate
Jen Simmons.

Frontend Focus
A once–weekly roundup of the best front-end news, articles and tutorials.
HTML, CSS, WebGL, Canvas, browser tech, and more. Published by
Cooperpress.
HeyDesigner
Covers HTML, CSS, and SCSS, but also a range of other topics
interesting to designers. Published weekly by Tamas Sari.

P.S. - If you're interested in these types of topics, I send out a weekly

newsletter called the 'Friday Frontend'. Every Friday I send out 15 links to
the best articles, tutorials, and announcements in CSS/SCSS, JavaScript,
and assorted other awesome Front-end News. Sign up now!