CSS Cheatsheet

/* Element */
p { color: blue; }

/* Class */
.card { padding: 1rem; }

/* ID */
#header { height: 60px; }

/* Attribute */
input[type="text"]     { border: 1px solid gray; }
a[href^="https"]       { color: green; }     /* starts with */
a[href$=".pdf"]        { color: red; }       /* ends with */
a[href*="example"]     { font-weight: bold; }/* contains */

/* Combinators */
div p        { }  /* descendant (any depth) */
div > p      { }  /* direct child */
h2 + p       { }  /* adjacent sibling */
h2 ~ p       { }  /* general sibling */

/* Grouping */
h1, h2, h3   { font-family: sans-serif; }

/* Universal */
*            { box-sizing: border-box; }

/* The box model: margin → border → padding → content */

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

/* border-box = width includes padding + border */
*, *::before, *::after {
  box-sizing: border-box;  /* ← always use this! */
}

/* Margin shorthand: top right bottom left (clockwise) */
margin: 10px;                /* all sides */
margin: 10px 20px;           /* vertical | horizontal */
margin: 10px 20px 30px;      /* top | horizontal | bottom */
margin: 10px 20px 30px 40px;/* top | right | bottom | left */

/* Auto centering */
.centered {
  width: 600px;
  margin: 0 auto;
}

/* Display */
display: block;        /* full width, new line */
display: inline;       /* no width/height, flows inline */
display: inline-block; /* inline but respects width/height */
display: none;         /* removed from flow */
display: flex;         /* flexbox container */
display: grid;         /* grid container */

/* Position */
position: static;      /* default */
position: relative;    /* offset from normal position */
position: absolute;    /* relative to nearest positioned ancestor */
position: fixed;       /* relative to viewport */
position: sticky;      /* toggles between relative and fixed */

/* Sticky header example */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

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

/* Overflow */
overflow: hidden;      /* clip content */
overflow: auto;        /* scroll if needed */
overflow: scroll;      /* always show scrollbar */

/* Container */
.flex-container {
  display: flex;
  flex-direction: row;           /* row | row-reverse | column | column-reverse */
  justify-content: center;       /* main axis alignment */
  /*  flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;           /* cross axis alignment */
  /*  stretch | flex-start | flex-end | center | baseline */
  flex-wrap: wrap;               /* nowrap | wrap | wrap-reverse */
  gap: 1rem;                     /* spacing between items */
}

/* Items */
.flex-item {
  flex: 1;                       /* shorthand: flex-grow flex-shrink flex-basis */
  flex-grow: 1;                  /* how much to grow */
  flex-shrink: 0;                /* how much to shrink */
  flex-basis: 200px;             /* initial size */
  align-self: flex-end;          /* override align-items for this item */
  order: 2;                      /* visual order */
}

/* Common patterns */
/* Center everything */
.center-all {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Space between nav items */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

/* Push last item to the right */
.nav-item:last-child {
  margin-left: auto;
}

/* Container */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;              /* 3 equal columns */
  grid-template-columns: repeat(3, 1fr);             /* same as above */
  grid-template-columns: 200px 1fr 200px;            /* sidebar layout */
  grid-template-rows: auto 1fr auto;                  /* header, main, footer */
  gap: 1rem;
}

/* Auto-fill responsive grid (no media queries!) */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Item placement */
.item {
  grid-column: 1 / 3;       /* span columns 1-2 */
  grid-column: span 2;       /* span 2 columns */
  grid-row: 1 / 3;          /* span rows 1-2 */
}

/* Named areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Alignment */
place-items: center;           /* align-items + justify-items */
place-content: center;         /* align-content + justify-content */

.text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;               /* 16px by default */
  font-weight: 400;              /* 100-900, normal=400, bold=700 */
  line-height: 1.6;              /* unitless multiplier preferred */
  letter-spacing: 0.02em;
  text-align: center;            /* left | right | center | justify */
  text-transform: uppercase;     /* lowercase | capitalize | none */
  text-decoration: underline;    /* none | line-through */
  text-overflow: ellipsis;       /* clip | ellipsis (needs overflow:hidden) */
  white-space: nowrap;
  word-break: break-word;
}

/* Truncate with ellipsis (single line) */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line clamp */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive font (clamp) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Color formats */
color: #ff6347;                 /* hex */
color: rgb(255, 99, 71);       /* rgb */
color: rgba(255, 99, 71, 0.5); /* with alpha */
color: hsl(9, 100%, 64%);     /* hue, saturation, lightness */

/* Backgrounds */
background-color: #0d1117;
background-image: url('bg.jpg');
background-size: cover;         /* cover | contain | auto */
background-position: center;
background-repeat: no-repeat;

/* Gradients */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: radial-gradient(circle, #fff, #000);

/* Opacity */
opacity: 0.8;

/* Backdrop blur (glass effect) */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Units */
px    /* absolute pixels */
rem   /* relative to root font-size (16px default) */
em    /* relative to parent font-size */
%     /* relative to parent */
vw    /* 1% of viewport width */
vh    /* 1% of viewport height */
dvh   /* dynamic viewport height (handles mobile toolbars) */
ch    /* width of the '0' character */

/* Sizing */
width: 100%;
max-width: 1200px;
min-width: 320px;
height: 100vh;
min-height: 100dvh;       /* full height on mobile */
aspect-ratio: 16 / 9;     /* maintain ratio */

/* calc() for math */
width: calc(100% - 2rem);
height: calc(100vh - 60px);

/* clamp(min, preferred, max) */
width: clamp(300px, 50%, 800px);

/* Transition */
.btn {
  background: #58a6ff;
  transition: all 0.3s ease;
  /* transition: property duration timing-function delay */
}
.btn:hover {
  background: #79b8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Timing functions */
transition-timing-function: ease;          /* default */
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Transform */
transform: translateX(50px);
transform: rotate(45deg);
transform: scale(1.2);
transform: skew(10deg);

/* Keyframe Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeIn 0.5s ease forwards;
  /* animation: name duration timing fill-mode */
}

/* Spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.loading { animation: pulse 2s ease-in-out infinite; }

/* Mobile-first breakpoints */
/* Default styles = mobile */

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

/* Example: stack → row */
.grid {
  display: grid;
  grid-template-columns: 1fr;           /* mobile: 1 column */
  gap: 1rem;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* tablet: 2 columns */
  }
}
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 columns */
  }
}

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

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --text: #e6edf3;
  }
}

/* Print */
@media print {
  .no-print { display: none; }
}

/* Pseudo-classes (state) */
:hover         /* mouse over */
:focus         /* focused (tab, click) */
:focus-visible /* focused via keyboard only */
:active        /* being clicked */
:visited       /* visited link */
:disabled      /* disabled input */
:checked       /* checked checkbox/radio */
:valid         /* valid form input */
:invalid       /* invalid form input */
:placeholder-shown  /* empty input */

/* Structural */
:first-child       :last-child
:nth-child(2)      :nth-child(odd)
:nth-child(3n)     /* every 3rd */
:not(.hidden)      /* negation */
:has(.icon)        /* parent selector (modern!) */
:is(h1, h2, h3)    /* matches any */

/* Pseudo-elements (generated content) */
::before     /* insert before content */
::after      /* insert after content */
::placeholder
::selection  /* highlighted text */
::first-line
::first-letter

/* Example: required field asterisk */
label.required::after {
  content: " *";
  color: #f85149;
}

/* :has() – style parent based on child */
.card:has(img) {
  padding: 0;     /* no padding if card has image */
}

/* Define variables */
:root {
  --primary: #58a6ff;
  --bg: #0d1117;
  --text: #e6edf3;
  --radius: 8px;
  --shadow: 0 2px 10px rgba(0,0,0,0.3);
  --font: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* Use variables */
.card {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Fallback value */
color: var(--accent, #58a6ff);

/* Override per component */
.dark-card {
  --bg: #161b22;
  --text: #c9d1d9;
}

/* Use in calc */
:root { --spacing: 8px; }
.box { padding: calc(var(--spacing) * 2); }

/* Toggle dark/light */
[data-theme="dark"] {
  --bg: #0d1117;
  --text: #e6edf3;
}
[data-theme="light"] {
  --bg: #ffffff;
  --text: #1f2937;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100dvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}

.card {
  background: var(--bg);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}