CSS

27 links • Web DevelopmentCSS

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 #

Source

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.

Double Text Shadow #

text-shadow: rgba(10, 189, 240, 0.298039) 3px 3px 0px, rgba(254, 1, 1, 0.298039) -3px -3px 0px;

Stop iOS changing unicode characters to emoji #

[aria-checked="false"] > i::before {
    content: "\2610\fe0e";
}
[aria-checked="true"] > i::before {
    content: "\2611\fe0e";
}