CSS Cheat Sheet

Selectors

p / .card / #main / *: Type, class, id, universal
nav a / ul > li / h2 + p / h2 ~ p: Descendant, child, next sibling, later siblings
[type="email"] / [href^="https"] / [href$=".pdf"]: Attribute equals / starts with / ends with
a:hover / :focus-visible / li:nth-child(2n): Pseudo-classes
.card:has(img) / :is(h1, h2) / :where(ul, ol) / :not(.active): Relational and logical pseudo-classes
p::first-line / .req::after / li::marker: Pseudo-elements

id (1,0,0) > class/attr/pseudo-class (0,1,0) > type (0,0,1): Specificity order; :where() adds 0
color: red !important;: Wins over normal declarations — use rarely
@layer reset, base, components, utilities;: Declare cascade layer order (later wins)
color: inherit / initial / unset / revert: Global keywords
all: unset: Reset every property on an element

*, *::before, *::after { box-sizing: border-box; }: Width includes padding and border
margin: 1rem auto;: Vertical 1rem, horizontally centered
padding: 4px 8px 12px 16px;: Top, right, bottom, left (clockwise)
border: 1px solid #ccc; border-radius: 8px;: Border and rounded corners
margin-inline: auto; padding-block: 1rem;: Logical properties (writing-direction aware)
max-width: 65ch; min-height: 100dvh;: Readable line length / full dynamic viewport height

display: grid; grid-template-columns: 200px 1fr;: Two columns: fixed sidebar, flexible main
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));: Responsive card grid without media queries
grid-column: 1 / -1;: Span from the first to the last line
grid-template-areas: "head head" "side main";: Named areas (grid-area: head on the item)
place-items: center;: Center items in their cells
grid-template-rows: subgrid;: Align nested grid tracks with the parent

@media (width >= 48rem) { … }: Media query (range syntax)
@media (prefers-color-scheme: dark) { … }: Dark mode
@media (prefers-reduced-motion: reduce) { … }: Respect reduced-motion settings
.wrap { container-type: inline-size; }: Make an element a size container
@container (width > 30rem) { … }: Container query
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);: Fluid value between a minimum and maximum

:root { --brand: oklch(55% 0.15 250); }: Define a custom property
color: var(--brand, blue);: Use it, with a fallback
rgb(0 0 0 / 50%) / hsl(210 80% 40%): Modern space-separated color syntax
color-mix(in oklab, var(--brand) 70%, white): Mix two colors
color-scheme: light dark; color: light-dark(#111, #eee);: Built-in light/dark values

transition: transform 200ms ease-out;: Animate property changes
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }: Define an animation
animation: fade 300ms ease-in both;: Run it
transform: translateY(-4px) rotate(3deg) scale(1.05);: Move, rotate, scale
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);: Soft shadow
position: sticky; top: 0;: Stick to the top while scrolling