In developing a card with box-shadow I realized that it's harder than I remembered so I decided to take another look. Box shadow takes two, three or four parameters. If two values are specified, they...

Sometimes it's nice to put some sort of emphasis on our text to highlight elements or because we just want it to look different. One way to create these highlights is to use the text-emphasis...

In the previous article, we discussed inline-size container queries. There is another type of container query: style queries. There are some significant differences Unlike inline-size queries, every...

Container queries introduce an additional and complementary way to create content in addition to what media queries allow. This post will look at container queries and how to use them to build a...

There are two ways to measure content in CSS. Explicit measurements are what we're most familiar with. These are the pixels, rems and ems. Intrinsic sizes don't provide exact dimensions but size...

The Writing Modes specification reached full recommendation status almost 5 years ago. I've written about it before but I think it's time to revisit them again and see how they could be applied to...

One way of thinking about HTML and web content is to think about boxes, multiple boxes surrounding your content. You can see these nested boxes in your browser's Dev Tools as shown in figure 1. CSS...

CSS Shapes have been around for a long time and allow developers to wrap text around the shape of the image. According to MDN: The CSS shapes module describes geometric shapes that can be in CSS. For...

Headings can show orphan issues that can cause readability issues. In this context, an orphan is a single word (or syllable) that sits at the bottom of a paragraph of text. As a developer, you don't...

Chris Coyuer wrote about the hanging punctuation CSS property, how it works and why it may be useful. This property controls the pulling of characters, usually quotation marks, from the body of the...

This post is an extension to the previous one What are Triadic and Tetradic Color Palettes and How to Use Them. It will explore further types of palettes, also known as harmonies in color theory, and...

In my last post Creating an OKLCH Generator Tool, I wrote about about Triadic and Tetradic palettes and how to build them using vanilla JS. This post will cover what these palettes are and how to use...

This code started as an exercise in ChatGPT prompt generation and a way to explore what we can do with OKLCH colors. It uses vanilla Javascript and deliberately avoids using libraries like Chroma.js...

This post will look at two areas related to reading online: How people read online How to determine optimal font sizes? Is there such a thing? If people scan the content of your page, what font size...

Jeremy Keith recently published Declarative design on his blog. The premise of the post is that there are two divergent ways to think about web design and building web content, encapsulated by these...

CSS has evolved significantly over the last few years. Some of these changes deal with a set of selectors known as the functional pseudo-classes. The :not() pseudo-class has been around for a while...

Evergreen browsers are those that update themselves automatically, or very close to it, without user intervention. This is particularly useful when it comes to new features. We don't have to wait for...

I know that it's unlikely people will disable Javascript on their browsers, but it is not impossible. We can notify the user of the lack of Javascript using the scripting media query. This example...

There may be times when we may want to style elements that are not direct descendants of the elements that we want to style. In Select an Element Which Doesn't Descend From Another in CSS Chris...

When writing CSS one of the most annoying and repeating tasks is having to customize the styles for the last element in a list or other repetitive components. I've lost track of how many times I've...

The display property has been around for a long time but its definition has evolved over the years. Formally, the display property sets an element's inner and outer display types. The outer type sets...

One thing I particularly like about variable fonts is that it allows some interesting animation tricks. For example, since variable fonts have information about all possible variations of the font, we...

In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired...

Both Eric Meyer's Reset and Normalize.css are comprehensive solutions to provide a baseline for CSS development. Can I build a set of defaults that make sense for my projects on top of these resets?...

I came accross reset from Harry Roberts (from Twitter/X) via (Kevin Powell's YouTube video). I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images...

There are times when we know that users will print a page of web content. Maybe a set of directions for a recipe, a map with directions or a page of information that we want to preserve. While it's...

In Revisiting Custom Properties we looked at how to define custom properties using the @property at-rule. One aspect of @property that we didn't discuss are the syntax multipliers and...

Crtical CSS is simple in theory but not so much in execution. In this post we'll look at what critical CSS is, how does it work and whether it's still necessary for all use cases. What is Critical CSS...

While researching about using resets as the basis for custom project defaults, I came accross this solution to a problem I was having. pre, code, kbd, samp The font-family: monospace, monospace hack...