20 CSS One-Liners Every CSS Expert Needs to Know

All you need is HTML and CSS

FYI, most of these CSS tricks are from my book:

All you need is HTML and CSS: Building Interactive Web Interfaces with no JavaScript

There are many other examples pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even an animated pure CSS clock (analog and digital) and a fully working star rating widget!

1. Prevent Text Selection

Ever wanted to stop users from selecting text on your page, maybe for a sleek UI element or a game interface? It’s a neat trick to keep your UI elements undisturbed by accidental text selection.

.no-select { user-select: none }

Variations include using user-select: text for areas you want to allow text selection or user-select: all to let users select all content with a single click.

Did you know? A semicolon (;) is only required at the end of a CSS declaration if it’s…