CSS Basics

Underlining Links With CSS A practical guide to styling link underlines with modern CSS text-decoration properties. Perfect for bookmarking when you need a quick reference!

Underlining Links With #CSS: "A practical guide to styling link underlines with modern CSS text-decoration properties. Perfect for bookmarking when you need a quick reference!" www.alwaystwisted.com/articles/und...

Yet Another Way to Center an (Absolute) Element | CSS-Tricks TL;DR: We can center absolute-positioned elements in three lines of CSS. And it works on all browsers!

Yet Another Way to Center an (Absolute) Element: "We can center absolute-positioned elements in three lines of #CSS. And it works on all browsers!" css-tricks.com/yet-another-...

How to scale elements and their layout with CSS "zoom" The CSS zoom property, unlike scale, affects an element's layout size, not just its visual appearance.

How to scale elements and their layout with #CSS zoom: "The CSS zoom property, unlike scale, affects an element's layout size, not just its visual appearance." www.stefanjudis.com/today-i-lear...

Anna Filou | Smart Carousels with CSS Product/UI Designer based in Athens, working internationally.

Smart Carousels with #CSS: "You’ve undoubtedly seen carousels on the web. You know how usually the content gets cut off? So for a long time, I thought this was an unavoidable problem. But then I saw a carousel that worked right on Apple’s website! So… there was a way!" annafilou.com/en/carousels

An in-depth guide to customising lists with CSS 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…

An in-depth guide to customising lists with #CSS: "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." piccalil.li/blog/an-in-d...

Anchored Menus and a Lesson in Scoping Turns out `anchor-scope` is pretty darn useful for button/menu setups that will appear multiple times on the same page.

Anchored Menus and a Lesson in Scoping: "Turns out `anchor-scope` is pretty darn useful for button/menu setups that will appear multiple times on the same page." #CSS frontendmasters.com/blog/anchore...

CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match! | utilitybend CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience. A Valentine's special.

#CSS Animation Triggers: Playing animations on scroll without scrubbing: "CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience." utilitybend.com/blog/css-ani...

Lowering the specificity of multiple rules at once - Manuel Matuzovic You probably already knew that you can use `:where()` to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?

Lowering the specificity of multiple rules at once: "You probably already knew that you can use :where() to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?" #CSS matuzo.at/blog/2026/lo...

How to Create a CSS-only Elastic Text Effect What can we say except BOINNNGGG BOINNGGGGGG.

How to Create a #CSS-only Elastic Text Effect: "What can we say except BOINNNGGG BOINNGGGGGG." frontendmasters.com/blog/how-to-...

Making a Responsive Pyramidal Grid With Modern CSS | CSS-Tricks This is the second part of a small two-part series. In this article, we will explore another type of grid: a pyramidal one. We are still working with hexagon shapes, but a different organization of…

Making a Responsive Pyramidal Grid With Modern #CSS: "In this article, we will explore another type of grid: a pyramidal one. We are still working with hexagon shapes, but a different organization of the elements, while exploring other different shapes." css-tricks.com/making-a-res...

Background Patterns with CSS `corner-radius` You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.

Background Patterns with #CSS `corner-radius` – "You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background." frontendmasters.com/blog/backgro...

Trying to Make the Perfect Pie Chart in CSS | CSS-Tricks Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.

Trying to Make the Perfect Pie Chart in #CSS: "Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it." css-tricks.com/trying-to-ma...

An Over-The-Top Spoiler Design with the Details Element You can style anything you want on the entire page when any given details element is open or closed.

An Over-The-Top Spoiler Design with the Details Element: "You can style anything you want on the entire page when any given details element is open or closed." #CSS frontendmasters.com/blog/an-over...

Can We Use A collection of websites focused on browsers usage and features.

Can We Use: "A collection of websites focused on browsers usage and features." canwe.dev

CSS Bar Charts Using Modern Functions | CSS-Tricks CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

#CSS Bar Charts Using Modern Functions: "CSS-only bar charts are one of those things we’ve tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?" css-tricks.com/css-bar-char...

The Browser Hates Surprises To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.

The Browser Hates Surprises: "To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary." #performance frontendmasters.com/blog/the-bro...

You probably shouldn’t be annotating focus order Sometimes not doing something is the right move.

You probably shouldn’t be annotating focus order: "When it comes to web accessibility, the order interactive elements receive should be a logical order. For the vast majority of situations, this means matching reading order." #a11y ericwbailey.website/published/yo...

button elements offer attributes to change form behavior Use formaction, formenctype, formmethod and formnovalidate to change form configuration with button attributes

button elements offer attributes to change form behavior: "Use formaction, formenctype, formmethod and formnovalidate to change form configuration with button attributes" #HTML www.stefanjudis.com/today-i-lear...

Container queries are rad AF! It’s still hard to give a shit about tech right now, and I want to give you an update on my community fridge project soon, but today, I actually am excited about a tech thing! Today, let’s talk about…

Container queries are rad AF! "The oversimplified explanation is that they’re like media queries, but the use a parent container element as the basis for their calculations instead of the viewport." #CSS gomakethings.com/container-qu...

How the same content always has multiple different versions We often talk about accessibility as if it were a checklist: contrast ratios, ARIA labels, keyboard navigation, screen readers. But it doesn’t explain why accessibility changes everything. The real…

How the same content always has multiple different versions: "The same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word." #a11y a11yblog.com/2026/01/30/h...

Some CSS only contrast options until contrast-color() is Baseline widely available While we wait for contrast-color() to arrive in all browsers, these CSS-only approaches by Donnie D’Amato give us a practical way forward that we can use right now, along with lots of other knowledge…

Some #CSS only contrast options until contrast-color() is Baseline widely available piccalil.li/blog/some-cs...

Unstacking CSS Stacking Contexts — Smashing Magazine In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly…

Unstacking #CSS Stacking Contexts: "Stacking contexts are incredibly useful, but they’re also widely misunderstood and often mistakenly created, leading to a slew of layout issues that can be tricky to solve." www.smashingmagazine.com/2026/01/unst...

A comprehensive guide to handling names in web applications with respect to people. A comprehensive guide to handling names in web applications with respect to people.

Names Are Hard But They Don't Have To Be: "When someone encounters a form that rejects their name, they don't think 'this is a technical limitation.' They think 'this company doesn't want me.' and they aren't wrong." toddl.dev/posts/names-...

Styling ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.

Styling ::search-text and Other Highlight-y Pseudo-Elements: "The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that." #CSS css-tricks.com/how-to-style...

Lowering the specificity of multiple rules at once - Manuel Matuzovic You probably already knew that you can use `:where()` to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?

Lowering the specificity of multiple rules at once: "You probably already knew that you can use `:where()` to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?" #CSS www.matuzo.at/blog/2026/lo...

I Learned The First Rule of ARIA the Hard Way | CSS-Tricks Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement.

I Learned The First Rule of ARIA the Hard Way: "Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement." #a11y css-tricks.com/i-learned-th...

How to Favicon in 2026: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.

How to Favicon in 2026: Three files that fit most needs: "Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack." evilmartians.com/chronicles/h...

Common misconceptions about testing accessibility - TetraLogical Testing for accessibility is often misunderstood. Teams either overestimate what tools can do, underestimate their own role, or assume testing is something that happens once only, at completion of…

Common misconceptions about testing accessibility: "Teams either overestimate what tools can do, underestimate their own role, or assume testing is something that happens once only, at completion of the development process." #a11y tetralogical.com/blog/2026/01...

Touch Targets and Web Accessibility Learn about touch target accessibility standards and WCAG guidelines. Discover why 24x24px or 44x44px targets improve usability for all users with code examples.

Touch Targets and Web Accessibility: "Learn about touch target accessibility standards and WCAG guidelines. Discover why 24x24px or 44x44px targets improve usability for all users with code examples." #a11y www.sitepoint.com/touch-target...

Better defaults for popovers - Manuel Matuzovic I recently added a rule to my reset style sheet UA+ that I wanted to share with you.

Better defaults for popovers: "I would argue that in most cases you want your popovers aligned closely with the button that controls them. As it turns out, that's super easy to achieve with #CSS anchor positioning, since popovers already have an implicit anchor." www.matuzo.at/blog/2026/be...