🎨 CSS Cheat Sheet

*              { }   /* universal */
div            { }   /* type */
.class         { }   /* class */
#id            { }   /* ID */
[href]         { }   /* has attribute */
[type="text"]  { }   /* attribute equals */
[class^="btn"] { }   /* starts with */
[class$="lg"]  { }   /* ends with */
[class*="icon"]{ }   /* contains */

div p         { }   /* descendant */
div > p       { }   /* direct child */
h2 + p        { }   /* adjacent sibling */
h2 ~ p        { }   /* general sibling */

:hover  :focus  :active  :visited
:checked  :disabled  :valid  :invalid
:first-child  :last-child  :nth-child(2n+1)
:nth-of-type(3)  :only-child  :not(.skip)
:is(h1, h2, h3)   /* matches any */
:where(nav, aside) /* zero specificity */
:has(img)          /* parent has child */
:focus-visible     /* keyboard focus only */

::before  ::after
::placeholder  ::selection  ::first-line
::first-letter ::marker ::backdrop

.badge::after {
  content: "NEW";
  background: red;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

* { box-sizing: border-box; }  /* width includes padding+border */

.box {
  width: 300px;
  height: 200px;
  padding: 16px 24px;          /* top/bottom  left/right */
  margin: 0 auto;              /* center block element */
  border: 2px solid #333;
  border-radius: 8px;
  outline: 3px solid blue;     /* doesn't affect layout */
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  overflow: hidden | scroll | auto | visible;
}

display: block | inline | inline-block | none
         flex | inline-flex | grid | inline-grid
         contents | table | list-item

position: static | relative | absolute | fixed | sticky
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10;

/* center absolutely */
.center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.flex-container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | flex-end | center
                   | space-between | space-around | space-evenly;
  align-items:   stretch | flex-start | flex-end | center | baseline;
  align-content: flex-start | flex-end | center
                 | space-between | space-around | stretch;
  gap: 16px;               /* row-gap column-gap */
  gap: 8px 16px;
}

.flex-item {
  flex: 1;                 /* flex-grow flex-shrink flex-basis */
  flex: 0 0 200px;        /* fixed 200px, no grow/shrink */
  flex-grow: 1;            /* take available space */
  flex-shrink: 0;          /* don't shrink */
  flex-basis: auto | 0 | 200px;
  align-self: auto | flex-start | flex-end | center | stretch;
  order: 2;               /* visual order */
}

/* Quick patterns */
.center { display:flex; justify-content:center; align-items:center; }
.space  { display:flex; justify-content:space-between; }
.stack  { display:flex; flex-direction:column; gap:8px; }

.grid {
  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: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer  footer";
}

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

/* Line-based */
.item {
  grid-column: 1 / 3;      /* start / end */
  grid-column: 1 / span 2; /* start / span n */
  grid-row: 2 / 4;

  /* Alignment */
  justify-self: start | end | center | stretch;
  align-self:   start | end | center | stretch;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* inherit parent tracks */
}

font-family: 'Inter', system-ui, sans-serif;
font-size: 16px | 1rem | clamp(1rem, 2.5vw, 1.5rem);
font-weight: 100 | 400 | 700 | 900 | bold;
font-style: normal | italic;
font-variant: normal | small-caps;
line-height: 1.5;
letter-spacing: 0.05em;
text-transform: none | uppercase | lowercase | capitalize;
text-align: left | center | right | justify;
text-decoration: underline | line-through | none;
text-overflow: ellipsis;  /* + overflow:hidden; white-space:nowrap */

<!-- In HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />

/* Custom font */
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2'),
       url('./fonts/myfont.woff')  format('woff');
  font-display: swap;
}

color: red;                     /* named */
color: #ff0000;                 /* hex */
color: #f00;                    /* shorthand hex */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);
color: oklch(0.6 0.2 30);      /* modern */
color: color-mix(in srgb, red 50%, blue); /* modern */

background-color: #1a1a2e;
background-image: url('img.jpg');
background-size: cover | contain | 100% 100%;
background-position: center | top right | 50% 50%;
background-repeat: no-repeat | repeat-x;
background-attachment: scroll | fixed;
background-clip: border-box | padding-box | content-box | text;

/* Gradients */
background: linear-gradient(135deg, #6366f1, #ec4899);
background: radial-gradient(circle at center, #6366f1, #0c0c0e);
background: conic-gradient(from 0deg, red, blue, red);

transform: translateX(50px) translateY(-20px);
transform: translate(50px, -20px);
transform: scale(1.2);
transform: scale(0.5, 2);     /* x y */
transform: rotate(45deg);
transform: skewX(10deg);
transform: perspective(500px) rotateY(30deg);

/* 3D */
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
transform-style: preserve-3d;
transform-origin: top left;    /* default: center */

/* property duration easing delay */
transition: all 0.3s ease;
transition: opacity 0.2s ease-in-out, transform 0.3s cubic-bezier(0.4,0,0.2,1);

/* Easing functions */
ease | ease-in | ease-out | ease-in-out | linear
cubic-bezier(0.4, 0, 0.2, 1)   /* material standard */
steps(4, end)                    /* step animation */

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

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

.animated {
  animation: fadeIn 0.5s ease forwards;
  /* name duration easing delay count direction fill-mode */
  animation: pulse 2s ease-in-out 0s infinite alternate both;
  animation-play-state: running | paused;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

/* Mobile first */
/* xs: default styles for mobile */

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

/* Range */
@media (640px <= width < 1024px) { /* md only */ }

/* Orientation */
@media (orientation: landscape) { }
@media (orientation: portrait)  { }

/* Feature queries */
@supports (display: grid) { }
@supports not (display: flex) { }

:root {
  --accent:   #6366f1;
  --bg:       #0c0c0e;
  --text:     #f0f0f0;
  --radius:   8px;
  --spacing:  16px;
}

.card {
  background: var(--bg);
  color:       var(--text, #000);  /* fallback */
  border-radius: var(--radius);
  padding:       var(--spacing);
}

/* Override in scope */
.card.danger { --accent: #ef4444; }

/* Responsive sizing */
font-size: clamp(1rem, 2.5vw, 2rem);
width: min(100%, 600px);
height: max(200px, 50vh);

/* Math */
width: calc(100% - 2rem);
width: calc(var(--sidebar) + 24px);

/* Logical properties (LTR/RTL safe) */
margin-inline: auto;       /* left+right */
padding-block: 1rem;       /* top+bottom */
border-inline-start: 2px solid var(--accent);

/* Container queries */
@container (min-width: 600px) {
  .card { flex-direction: row; }
}
.container { container-type: inline-size; }