Learn Advanced CSS

“CSS is easy” … claims everyone who never learned it. There’s nothing complicated about defining property names and values, but the subtleties of getting a page layout to work is another matter.

CSS has become more sophisticated, powerful, robust, and consistent during the past decade. We saw a few dozen CSS2.1 properties explode into hundreds as CSS3 evolved. You require design skills, development knowledge, and many hours of experience to become reasonably proficient.

Fortunately, our Advanced CSS Hub offers the fastest path to enlightenment. You’ll quickly transform your CSS knowledge and achieve guru status.

Advanced CSS Best Practices

The Best Practices section of this hub provides guides for the core concepts. You can skip or dip into each guide as necessary.

We cover Flexbox and CSS Grid, the new layout tools that have revolutionized CSS layouts and brought them into the modern world.

We also have fun with CSS animations, then combine them with 2D transformations to enhance the possibilities and performance. We then take it a step further with 3D transformation effects.

We dig into CSS variables, and cover two popular methodologies for naming things in CSS: BEM and Atomic CSS.

We then look at browser support for variable fonts, single font files that are able to behave like multiple fonts, and scroll snap, a native way to “snap” an element to its container when scrolled.

And we also investigate how to use CSS with SVG, with a focus on SVGs used in conjunction with media queries.

There’s a lot more on offer here, including books such as CSS Mastery, recently updated to include the latest advances in CSS, and our video on mastering CSS layouts with Flexbox.

Advanced CSS Tutorials and Guides

The Tutorials section of this hub digs into key areas of a modern CSS workflow.

We cover tips for optimizing CSS performance — an important consideration before you build your site.

We look at retrofitting popular layouts with CSS Grid, showing how to create responsive layouts without hacks, how to rebuild a card-based Tumblr layout with Grid, and how to build a modern, responsive CSS Grid layout from scratch with Grid.

We also cover how to convert a traditional, float-based layout into one that harnesses the benefits of CSS Flexbox and Grid, and we also walk you through how to use Grid to lay out HTML forms.

We show how to use CSS transforms for alignment, speech bubbles, animated spinners and card-flip animations, and the possibilities for working with CSS and SVG.

We show how CSS custom properties offer the power to generate dynamic themes, and we explain how to make the most of CSS in progressive web apps.

We also take a fresh look at CSS for print styles, showing how print styles can be added in minutes to add polish to any system.

Advanced CSS Tools and Resources

The Tools & Resources section of this Advanced CSS Hub covers the powerful tools that are available to help with your modern CSS workflow.

We show how to work with tools such as Gulp.js to automate many tasks, and we introduce the CSS Optimizer for minifying files.

We cover stylelint and UnCSS in our article on analyzing the quality of your CSS.

We also look at several CSS optimization tools for boosting PWA performance, and we dig into the browsers themselves, looking at the CSS debugging tools in Chrome, Safari, Firefox, and Microsoft Edge.