Include Stylesheet #

<link rel="stylesheet" href="style.css">

System Font Defaults #

Shipping system fonts to GitHub.com

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Using CSS Variables #

Browser support for CSS variables

:root {
--primary-color: #db0a5b;

.something {
color: var(--primary-color);

Dark Mode #

:root {
--text-color: #000;

@media (prefers-color-scheme: dark) {
:root {
--text-color: #fff;

Hover Element Change Another #

The Adjacent-Sibling Selector

<div class="hoverer">hover me</div>
<div class="hoveree">and I will appear</div>
.hoveree {
display: none;

.hoverer:hover + .hoveree {
display: block;

Quick Calendar with grids #


Setting up a calendar with HTML/CSS is so easy these days.
Make a container, put 28, 30, or 31 elements inside. Add two (2) lines of CSS:

display: grid;
grid-template-columns: repeat(7, 1fr);

Then tell calendar > day:first-child to start at the appropriate spot in the grid with grid-column-start: n

You’re done. Style to taste.