CSS

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 {
--primary-color: #db0a5b;
}

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;
}