CSS Cheat Sheet

* { margin: 0; }

div { color: red; }

.card { color: blue; }

#hero { color: green; }

article p { color: purple; }

ul > li { list-style: square; }

h2 + p { margin-top: 0; }

h2 ~ p { color: gray; }

input[type="email"] { border-color: blue; }
a[href^="https"] { color: green; }
img[alt~="logo"] { width: 100px; }

h1, h2, h3 { font-family: serif; }

a:hover { color: red; }
a:focus { outline: 2px solid blue; }
a:active { transform: scale(0.98); }
a:focus-visible { outline: 2px solid blue; }

li:first-child { font-weight: bold; }
li:last-child { border: 0; }
li:nth-child(2n) { background: #f1f5f9; }
li:nth-child(3n+1) { color: blue; }

input:checked { ... }
input:disabled { opacity: 0.5; }
input:required { border-color: red; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:placeholder-shown { ... }

:not(.active) { opacity: 0.5; }
:is(h1, h2, h3) { font-family: serif; }
:where(article, section) p { line-height: 1.6; }
.card:has(> img) { padding: 0; }

.tooltip::before {
  content: "";
  position: absolute;
}
.quote::after {
  content: "”";
}

p::first-line { font-weight: bold; }
p::first-letter { font-size: 3em; }
::selection { background: yellow; }

input::placeholder { color: gray; }
input::file-selector-button { ... }

li::marker { color: red; }

* { box-sizing: border-box; }

margin: 10px;            /* all */
margin: 10px 20px;       /* y x */
margin: 10 20 30 40px;   /* t r b l */
margin-inline: auto;     /* horizontal */

padding: 1rem 2rem;
padding-block: 1rem;
padding-inline: 2rem;

border: 1px solid #ccc;
border-block-end: 2px solid red;
border-style: solid dashed;

outline: 2px solid blue;
outline-offset: 4px;

display: block | inline | inline-block
       | flex | grid | inline-flex
       | none | contents | flow-root;

position: static | relative | absolute
        | fixed | sticky;

top: 0; right: 0; bottom: 0; left: 0;
inset: 0;                /* all four */
inset-block: 0;          /* top + bottom */
inset-inline: 0;         /* left + right */

z-index: 10;

visibility: visible | hidden | collapse;

overflow: hidden | auto | scroll;
overflow-x: auto;
overflow-wrap: break-word;

display: flex;
flex-direction: row | row-reverse
              | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;

justify-content: flex-start | center
                | flex-end | space-between
                | space-around | space-evenly;

align-items: stretch | flex-start
            | center | flex-end | baseline;
align-content: space-between | center;

gap: 16px;
row-gap: 12px;
column-gap: 24px;

flex: 1;                  /* grow shrink basis */
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
order: -1;
align-self: flex-end;

display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: 100px auto;

gap: 16px;
row-gap: 12px;
column-gap: 24px;

grid-template-areas:
  "header header"
  "sidebar main"
  "footer  footer";

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }

grid-column: 1 / 3;       /* span columns */
grid-column: span 2;
grid-row: 2 / 4;
grid-row: span 2;

grid-auto-flow: row | column | dense;
grid-auto-columns: 1fr;
grid-auto-rows: minmax(100px, auto);

justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
place-self: center;

width: 100%;
height: 100vh;
max-width: 1200px;
min-height: 100dvh;

100vh   /* viewport height */
100svh  /* small viewport height */
100lvh  /* large viewport height */
100dvh  /* dynamic viewport height */

width: fit-content;
width: min-content;
width: max-content;

aspect-ratio: 16 / 9;
aspect-ratio: 1;

font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;          /* 16px default */
font-weight: 400 | 700 | bold;
font-style: italic;
line-height: 1.6;
letter-spacing: 0.02em;

text-align: left | center | right | justify;
text-transform: uppercase | lowercase | capitalize;
text-decoration: underline wavy #4f46e5;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-indent: 1em;

white-space: nowrap | pre | pre-wrap | normal;
word-break: break-word;
overflow-wrap: anywhere;
text-overflow: ellipsis;
hyphens: auto;

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

color: red;
color: #4f46e5;
color: rgb(79 70 229);
color: rgb(79 70 229 / 0.8);
color: hsl(243 75% 59%);
color: oklch(55% 0.2 270);

border: 2px solid currentColor;
fill: currentColor;

accent-color: #4f46e5;     /* checkbox/radio */
caret-color: #4f46e5;       /* text caret */

:root {
  color-scheme: light dark;
}

background-color: #f1f5f9;
background-image: url('hero.jpg');
background-size: cover | contain;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

background: linear-gradient(
  to right,
  #4f46e5 0%,
  #06b6d4 100%
);

background: radial-gradient(
  circle at top right,
  #f59e0b,
  transparent 50%
);

background: conic-gradient(
  from 0deg,
  red, yellow, green, blue, red
);

background:
  linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
  url('hero.jpg') center/cover;

mix-blend-mode: multiply;

border-radius: 8px;
border-radius: 8px 16px;          /* tl-br tr-bl */
border-radius: 8px 16px 24px 32px;/* tl tr br bl */
border-radius: 50%;               /* circle */
border-radius: 999px;             /* pill */

border-top-left-radius: 8px;
border-end-end-radius: 16px;

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
box-shadow:
  0 1px 3px rgb(0 0 0 / 0.05),
  0 10px 30px rgb(0 0 0 / 0.10);

box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.1);

text-shadow: 0 2px 4px rgb(0 0 0 / 0.4);

filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.25));

transition: all 0.3s ease;
transition: opacity .25s ease, transform .25s ease;

transition-property: opacity, transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 100ms;

linear
ease | ease-in | ease-out | ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

animation: fadeIn 0.5s ease-out;
animation: spin 1s linear infinite;

animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 200ms;
animation-iteration-count: infinite | 3;
animation-direction: normal | reverse | alternate;
animation-fill-mode: forwards | backwards | both;
animation-play-state: paused | running;

transform: translateX(20px);
transform: translate(20px, 30px);
transform: scale(1.2);
transform: scale(1.2, 0.8);
transform: rotate(45deg);
transform: skew(10deg, 0);

transform: translate(-50%, -50%)
           rotate(45deg)
           scale(1.2);

transform: translateZ(20px);
transform: rotateX(30deg);
transform: rotateY(45deg);
perspective: 1000px;
transform-style: preserve-3d;

transform-origin: top left;

filter: blur(8px);
filter: brightness(1.2);
filter: contrast(1.4);
filter: grayscale(1);
filter: hue-rotate(90deg);
filter: saturate(1.5);
filter: sepia(0.7);
filter: invert(1);
filter: drop-shadow(0 4px 8px rgb(0 0 0 / .3));

filter: blur(2px) brightness(0.8) saturate(1.5);

backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);

opacity: 0.5;

:root {
  --brand: #4f46e5;
  --space: 1rem;
  --radius: 12px;
}

.btn {
  color: var(--brand);
  padding: var(--space);
  border-radius: var(--radius);
}

color: var(--brand, #4f46e5);

.card {
  --card-pad: 1.5rem;
  padding: var(--card-pad);
}

@media (min-width: 640px) { ... }   /* sm */
@media (min-width: 768px) { ... }   /* md */
@media (min-width: 1024px) { ... }  /* lg */
@media (min-width: 1280px) { ... }  /* xl */

@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
@media (prefers-contrast: more) { ... }

@media (hover: hover) { ... }
@media (any-pointer: fine) { ... }
@media (orientation: landscape) { ... }
@media print { ... }

.card {
  container-type: inline-size;
  container-name: card;
}

@container (min-width: 400px) {
  .title { font-size: 1.5rem; }
}

@container card (min-width: 600px) { ... }

font-size: 5cqi;     /* container inline */
height: 50cqb;       /* container block */
width: 100cqw;       /* container width */

.scroller {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.scroller > * { scroll-snap-align: start; }

.toc {
  position: sticky;
  top: 1rem;
}

.card:has(img) { padding: 0; }
form:has(:invalid) button { opacity: 0.5; }

margin-inline: auto;
padding-block: 1rem;
border-inline-start: 2px solid;

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}