Useful CSS - Simple Fixes for Everyday Styling Challenges

Published: 8/12/2021

Every developer should have a few CSS tricks up their sleeve.

Technically, these aren't tricks, nor are they obscure solutions; they're just simple things I use to overcome everyday styling challenges, and it's helpful to document these frequently-used fixes.

The Lobotomized Owl

When you really need a :first-of-class or :last-of-class selector, but sadly, one doesn't exist, use this to style all but the first descendant:

.content > * + * {
margin-top: 1rem;
}

This sets a top margin for each direct descendant when it follows another. All credit on this goes to The Lobotomized Owl Selector (opens in new tab)

A simple Sticky Footer

html, body {
height: 100%;
}

footer {
position: sticky;
top: 100vh;
}

Not the same as position: sticky by itself, as explained in this article (opens in new tab), the above styling with "pin" the footer to the bottom of the content.

Extra-bold Font Fix

When you can't make a font any bolder. But you still want it bolder. Use the text-shadow property.

.bold {
font-weight: bold;
}

.bolder {
text-shadow: 0 0 .01px black;
}

Experiment with one or the other, or combine both font-weight and text-shadow.

CSS Reset

Over the years, I've had many, many a "standard" reset. But this became my go-to in 2021.

The new/modern reset: https://www.joshwcomeau.com/css/custom-css-reset/ (opens in new tab)

Partial Bottom Border

Create a bottom border of any desired length and width that doesn't have to span the full width of the .headline text. It can also be positioned as desired below the text by adjusting the bottom value.

.headline {
position: relative;
}

.headline::after {
content: '';
width: 32px;
height: 1px;
border-bottom: 1px solid #7BBDFF;
position: absolute;
bottom: -8px;
left: 0;
}

Responsive Typography with clamp()

Use a convenient tool like this fluid typography calculator  (opens in new tab)to determine clamp settings, and responsive typography becomes easy. All that's needed are the minimum/maximum font sizes and minimum/maximum viewport sizes.

h1 {
font-size: clamp(1rem, 0.1038rem + 3.7736vw, 3.5rem);
}

Grid with Defined Number of Columns

When you need to create a grid layout for a known number of columns, try this combination of auto-fit or auto-fill and minmax. This grid is responsive, in that the number of columns can decrease but will never increase beyond the known number. Below is just a snippet. See the full CodePen (opens in new tab) here.

.grid-9x3 {
max-width: 900px;
margin: 0 auto;
align-items: start;
justify-items: start;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
column-gap: 2rem;
}

Note the two options: auto-fit and auto-fill. The the full CodePen (opens in new tab) shows both examples, but in summary auto-fit will expand the column width when there is extra space; auto-fill will not. I usually experiment with both to see what looks best as the screen shrinks.

Two solid background colors

Create a single div (or other element) with two solid backgrounds, that meet at an arbitrary point, but aren't blended. This creates the illusion of two different sections and can help accommodate "overlapping" layouts. It can be accomplished two different ways.

With linear-gradient

.two-bg--horizontal {
background: linear-gradient(to top, #fff 0%, #fff 50%,#f2f2f2 50%,#f2f2f2 100%);
}

With conic-gradient

.two-bg--vertical {
background: conic-gradient(#fff 50%, #f2f2f2 0);
}

In either case, the percentages can be adjusted to move the meeting point of the two backgrounds.