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. 🙂
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.
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.
[![ads via Carbon](https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png)](https://srv.carbonads.net/ads/click/x/GTND42QYCABICKQICY7LYKQMFTSI4KJMCKYDLZ3JCWAD5KQWCYBI553KC6BIE27MCVBDVK3EHJNCLSIZ?segment=placement:zendevcom;)[Limited time offer: Get 10 free Adobe Stock images.](https://srv.carbonads.net/ads/click/x/GTND42QYCABICKQICY7LYKQMFTSI4KJMCKYDLZ3JCWAD5KQWCYBI553KC6BIE27MCVBDVK3EHJNCLSIZ?segment=placement:zendevcom;)[ads via Carbon](http://carbonads.net/?utm_source=zendevcom&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon)
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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 | 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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 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.
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.
A natural language-focused CSS framework with extensive theming capabilities. A bit heavy-weight and challenging to break into subpieces, but extremely powerful.
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.
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.
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.
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.
A once–weekly roundup of the best front-end news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more. Published by Cooperpress.
Covers HTML, CSS, and SCSS, but also a range of other topics interesting to designers. Published weekly by Tamas Sari.