CSS
Cascading Style Sheets (CSS) are used to set the appearance and layout of web pages. For example, I use CSS to set the size and colour of the links on this page.
6 articles
A flash of light in the darkness
If you’re using an image as your background, remember to set a fallback colour as well, especially if you’re in dark mode.
An unexpected lesson in CSS stacking contexts
While trying to add some simple overlay labels, I stumbled into a sharp edge of a complex CSS feature called “stacking contexts”.
Two examples of hover styles on images
When I hover over an image, I can add a border to a link, or change the colours of an SVG icon.
CSS formatting in the console
Did you know you can use
%cto format yourconsole.logmessages?Creating a “simple” three-up image layout in CSS
A step-by-step breakdown of how I made a one-left, two-right layout for my images.
Prevent accidentally copying the prompt character in console code snippets
When I include console commands in a blog post, I don’t want somebody to accidentally copy the command prompt. CSS lets me avoid that.
8 notes
You can change the size of tabs on web pages with the
tab-sizepropertyHow do you write ratios in the
aspect-ratioproperty?When you define an aspect ratio as
x/y, you can only use numbers forxandy.There are limits on the styles you can apply with
:visitedBecause the
:visitedselector will tell you whether somebody has been to a URL, browsers limit what styles you can apply to such links – to prevent somebody nefarious stealing your browsing history.Drawing a diagonal banner over the corner of an image
Making an “under construction” element in pure CSS
Using a
repeating-linear-gradientas thebordergets you something that looks a bit like hazard tape.How to embed an inline SVG in a CSS rule
Modern browsers allow you to embed the SVG almost as-is, with just a couple of characters that need escaping – no base64 required!
How to create a footer that’s always at the bottom of the page
How to style a
<details>element differently depending on whether it’s open or closed