Learn how to use line-height units when setting paragraph margins — creating vertical rhythm in your text.

My favorite thing to do with the lh unit is to set margins on content. Let’s set a new universal margin on paragraphs with:

p { margin-block: 1lh; }

Learn how to use native CSS nesting in modern browsers. Understand the & selector, specificity rules, differences from Sass, and when to use nesting with practical examples for components, themes, and accessibility.

Here's where things get a little interesting. CSS nesting follows the same specificity rules as traditional CSS, with one important detail: the & nesting selector calculates its specificity like the :is() pseudo-class it uses the highest specificity from the parent selector list, not the sum of all the selectors.

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll share all of the tips and tricks I’ve learned for using it effectively. ✨

Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.

Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙

A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground.

A CSS reset for modern web development to provide a consistent and high-quality base for projects. Low-specificity and very opinionated to provide a strong foundation allowing seamless use in projects of varying scales and complexity.

• Element selectors keep styles as global as possible

• ID selectors identify things (one per page)

• Class selectors classify things
  Quite often, I’ll style those child elements using a descendant selector:

  # video > p

• Attribute selectors vary things

  .layout { […] }
  [data-layout="bartok"] { […] }

Apparently you are not a real CSS dev if you don’t maintain your own CSS reset. Challenge accepted! Not a typical reset, but for sure a bunch of opinions.

List style position

https://mayank.co/blog/css-reset-layer/

A web component for drawing patterns with CSS

https://cascadiajs-2025.netlify.app/23-starting-style/

A fast paced, animated, and jam packed tik-talk on CSS features from the past ~5 years. CSS has moved so fast, don't feel bad you aren't all caught up, no one is. This talk will teach you as many things as possible while providing good examples of practical use cases. Syntax, typography, color, architecture, and more.

00:00 - Introduction & Overview
01:20 - Page & View Transitions
03:04 - Range Syntax & Media Queries
03:51 - Container Queries & Units
06:04 - Cascade Layers
07:53 - Field Sizing with CSS
09:30 - Color Scheme: Light & Dark Modes
11:47 - Accent Color & Input Styling
12:34 - Type-Safe CSS Variables (app property)
15:14 - Scroll-Driven Animations
16:41 - View Animations & Intersection Observer Alternatives
18:21 - Advanced Easing with linear()
18:57 - Native Search Element
19:27 - Improved Form Validation
20:38 - Exclusive Accordions & Animating Height
21:34 - Math Functions in CSS
22:28 - Text Wrap: balance & pretty
24:47 - Color Mix & Color Spaces
25:51 - Relative Color & Dynamic Palettes
28:01 - Custom Scrollbar Styling
28:13 - Starting Style & Animating Entrances
28:37 - Dialogs, Popovers & Anchor Positioning
29:29 - Textbox Trim & Button Alignment
29:52 - Conclusion & Takeaways

Grid is a powerful, flexible tool that brings complex layouts to life.

Make your links beautiful and accessible.

The principle of 8pt Grid is that use multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.

Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

Physical, absolute units

When we’re writing CSS, we tend to use relative, responsive units such as rem, em, etc, which scale based on user preferences and such.
Sometimes, I find myself forgetting that CSS even has units of standard, absolute measurements, but we have a lovely collection at our disposal. It is worth keeping in mind they aren’t always accurate on screen, but they usually are when physically printed.

An interactive guide to learn CSS Relative Colors.

When you hide an interactive element, make sure you choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it so that a user navigating by touch can find it where they expect to, and then make it transparent.

This technique explores using: animation with CSS transition and transform, using the :focus-within pseudo-class, CSS grid, and accessibility considerations for dropdown menus.

Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

Create & export mesh gradients as SVG or to Figma. Quickly experiment with grainy noise and blur. Includes a one-click export to Figma for use in designs.