CSS Quick Reference Cheatsheet

🎯 Selectors

/* Basic selectors */
*               { }  /* Universal — all elements */
div             { }  /* Element type */
.class-name     { }  /* Class */
#my-id          { }  /* ID */

/* Combination selectors */
div p           { }  /* Descendant (p inside div) */
div > p         { }  /* Direct child only */
h1 + p          { }  /* Adjacent sibling (p immediately after h1) */
h1 ~ p          { }  /* General sibling (all p after h1) */
div, p, span    { }  /* Multiple selectors */

/* Attribute selectors */
[href]          { }  /* Has href attribute */
[href="url"]    { }  /* Exact match */
[href^="https"] { }  /* Starts with */
[href$=".pdf"]  { }  /* Ends with */
[href*="blog"]  { }  /* Contains */

/* Pseudo-classes */
a:hover         { }  /* On mouse over */
a:focus         { }  /* Focused (keyboard/click) */
a:active        { }  /* Being clicked */
a:visited       { }  /* Visited link */
input:disabled  { }  /* Disabled form element */
input:checked   { }  /* Checked checkbox/radio */
input:required  { }  /* Required field */
input:valid     { }  /* Valid input */
input:invalid   { }  /* Invalid input */
input:focus-visible { } /* Focused via keyboard */

/* Structural pseudo-classes */
li:first-child    { }  /* First child */
li:last-child     { }  /* Last child */
li:nth-child(2)   { }  /* 2nd child */
li:nth-child(odd) { }  /* Odd children */
li:nth-child(even){ }  /* Even children */
li:nth-child(3n)  { }  /* Every 3rd */
p:first-of-type   { }  /* First p among siblings */
p:last-of-type    { }  /* Last p among siblings */
p:only-child      { }  /* Only child */
:not(.active)     { }  /* Negation */
:is(h1, h2, h3)  { }  /* Matches any in list */
:where(h1, h2)   { }  /* Like :is() but 0 specificity */
:has(img)         { }  /* Parent that contains img */

/* Pseudo-elements */
p::before         { }  /* Insert before content */
p::after          { }  /* Insert after content */
p::first-line     { }  /* First line of text */
p::first-letter   { }  /* First letter */
::placeholder     { }  /* Input placeholder */
::selection       { }  /* User-selected text */
::marker          { }  /* List item marker */

📏 Specificity

/* Specificity order (low → high) */
*                         /* 0,0,0,0 */
div, p (elements)         /* 0,0,0,1 */
.class, [attr], :pseudo   /* 0,0,1,0 */
#id                       /* 0,1,0,0 */
style=""                  /* 1,0,0,0 */
!important                /* Overrides everything (avoid) */

/* Higher specificity wins — same specificity = last rule wins */

div p        { } /* 0,0,0,2 */
.nav a       { } /* 0,0,1,1 */
#header .nav { } /* 0,1,1,0 */

/* Good practice: keep specificity low with classes */
/* Avoid IDs and !important in stylesheets */

📦 Box Model

.box {
  /* Content */
  width: 300px;
  height: 200px;

  /* Padding (inside — pushes content inward) */
  padding: 20px;                  /* All sides */
  padding: 10px 20px;             /* Top/bottom Left/right */
  padding: 10px 20px 15px 5px;   /* Top Right Bottom Left */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;

  /* Border */
  border: 1px solid #ccc;
  border: 2px dashed red;
  border-top: 3px solid blue;
  border-radius: 8px;             /* Rounded corners */
  border-radius: 50%;             /* Circle (on square element) */
  border-radius: 4px 8px 12px 4px; /* Top-right Bottom-left Bottom-right Top-left */

  /* Margin (outside — space between elements) */
  margin: 20px;
  margin: 10px auto;              /* Top/bottom auto = center horizontally */
  margin-top: -20px;              /* Negative margin (use carefully) */

  /* Box sizing */
  box-sizing: border-box;   /* Width includes padding + border (recommended) */
  box-sizing: content-box;  /* Width = content only (default) */

  /* Outline (outside border, doesn't affect layout) */
  outline: 2px solid blue;
  outline-offset: 4px;
  outline: none;            /* Remove focus outline (add custom instead) */
}

🔢 Units

/* Absolute */
px    /* Pixels */
pt    /* Points (print) */
cm, mm, in

/* Relative */
em    /* Relative to parent font-size */
rem   /* Relative to root (html) font-size */
%     /* Relative to parent */

/* Viewport */
vw    /* 1% of viewport width */
vh    /* 1% of viewport height */
vmin  /* 1% of smaller viewport dimension */
vmax  /* 1% of larger viewport dimension */
svh   /* Small viewport height (mobile-safe) */
dvh   /* Dynamic viewport height */

/* Function units */
calc(100% - 60px)         /* Calculation */
min(50%, 300px)           /* Smaller of two values */
max(200px, 50%)           /* Larger of two values */
clamp(1rem, 2.5vw, 2rem)  /* Min, preferred, max */

📐 Flexbox

/* CONTAINER */
.flex-container {
  display: flex;
  display: inline-flex;

  /* Direction */
  flex-direction: row;            /* Default — left to right */
  flex-direction: row-reverse;    /* Right to left */
  flex-direction: column;         /* Top to bottom */
  flex-direction: column-reverse; /* Bottom to top */

  /* Wrapping */
  flex-wrap: nowrap;              /* Default — single line */
  flex-wrap: wrap;                /* Wrap to new lines */
  flex-wrap: wrap-reverse;        /* Wrap in reverse */

  /* Shorthand */
  flex-flow: row wrap;            /* direction + wrap */

  /* Main axis alignment (horizontal in row) */
  justify-content: flex-start;    /* Default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* Equal gaps between */
  justify-content: space-around;  /* Equal gaps including edges */
  justify-content: space-evenly;  /* Perfectly equal gaps */

  /* Cross axis alignment (vertical in row) */
  align-items: stretch;           /* Default — fill container */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;          /* Align text baselines */

  /* Multi-line cross axis */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: stretch;         /* Default */

  gap: 16px;                      /* Gap between items */
  gap: 16px 24px;                 /* Row gap, Column gap */
  row-gap: 16px;
  column-gap: 24px;
}

/* ITEMS */
.flex-item {
  /* Grow (how much to expand) */
  flex-grow: 0;     /* Default — don't grow */
  flex-grow: 1;     /* Grow to fill space (equally with other grow:1 items) */
  flex-grow: 2;     /* Grow 2x relative to flex-grow:1 siblings */

  /* Shrink (how much to shrink) */
  flex-shrink: 1;   /* Default — can shrink */
  flex-shrink: 0;   /* Don't shrink */

  /* Basis (initial size before growing/shrinking) */
  flex-basis: auto; /* Default — use width/content */
  flex-basis: 200px;
  flex-basis: 30%;

  /* Shorthand: grow shrink basis */
  flex: 1;          /* flex: 1 1 0% — grow and shrink equally */
  flex: auto;       /* flex: 1 1 auto */
  flex: none;       /* flex: 0 0 auto — rigid */
  flex: 0 0 200px;  /* Fixed 200px, no grow or shrink */

  /* Self alignment (override container's align-items) */
  align-self: auto;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;

  /* Order (visual order — doesn't affect DOM) */
  order: 0;         /* Default */
  order: -1;        /* Move before all order:0 items */
  order: 1;         /* Move after all order:0 items */
}

🔲 CSS Grid

/* CONTAINER */
.grid-container {
  display: grid;
  display: inline-grid;

  /* Define columns */
  grid-template-columns: 200px 200px 200px;
  grid-template-columns: 1fr 2fr 1fr;            /* Fractional units */
  grid-template-columns: repeat(3, 1fr);         /* 3 equal columns */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* Define rows */
  grid-template-rows: 100px auto 60px;
  grid-auto-rows: minmax(100px, auto);           /* Implicit row height */

  /* Named areas */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

  /* Gaps */
  gap: 20px;
  gap: 20px 30px;    /* Row gap, column gap */
  row-gap: 20px;
  column-gap: 30px;

  /* Alignment of all items */
  justify-items: stretch;   /* Default */
  justify-items: start;
  justify-items: end;
  justify-items: center;

  align-items: stretch;     /* Default */
  align-items: start;
  align-items: end;
  align-items: center;

  /* Alignment of entire grid within container */
  justify-content: start;
  justify-content: center;
  justify-content: space-between;

  align-content: start;
  align-content: center;
}

/* ITEMS */
.grid-item {
  /* Place by line numbers */
  grid-column: 1 / 3;           /* Span from line 1 to 3 */
  grid-column: 1 / span 2;      /* Start at 1, span 2 columns */
  grid-column: span 2;          /* Span 2 from auto position */
  grid-row: 1 / 3;

  /* Shorthand: row-start / col-start / row-end / col-end */
  grid-area: 1 / 1 / 3 / 3;

  /* Place in named area */
  grid-area: header;
  grid-area: sidebar;
  grid-area: main;

  /* Self alignment (override container's justify/align-items) */
  justify-self: start;
  justify-self: center;
  align-self: start;
  align-self: center;
}

/* Responsive grid example */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Full page layout example */
.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

🎨 CSS Custom Properties (Variables)

/* Define in :root for global access */
:root {
  --color-primary: #6c63ff;
  --color-bg: #0f0f1a;
  --color-text: #e0e0e0;
  --font-size-base: 16px;
  --spacing-md: 1.5rem;
  --radius: 8px;
  --transition: all 0.3s ease;
  --shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Use anywhere */
.button {
  background-color: var(--color-primary);
  font-size: var(--font-size-base);
  border-radius: var(--radius);
  transition: var(--transition);
}

/* Fallback value */
color: var(--color-accent, #ff6b6b);  /* Use #ff6b6b if variable not defined */

/* Override in component scope */
.dark-card {
  --color-bg: #1a1a2e;    /* Only affects this element and children */
  background: var(--color-bg);
}

/* Dynamic updates with JavaScript */
/* document.documentElement.style.setProperty('--color-primary', '#ff6b6b'); */

🎬 Transitions & Animations

/* TRANSITIONS */
.button {
  background: blue;
  transition: background 0.3s ease;           /* Single property */
  transition: background 0.3s ease, transform 0.2s ease-out;  /* Multiple */
  transition: all 0.3s ease;                  /* All properties */
}

.button:hover {
  background: darkblue;
  transform: translateY(-2px);
}

/* Timing functions */
ease          /* Slow start and end (default) */
linear        /* Constant speed */
ease-in       /* Slow start */
ease-out      /* Slow end */
ease-in-out   /* Slow start and end */
cubic-bezier(0.4, 0, 0.2, 1)  /* Custom curve */

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

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.element {
  animation: fadeIn 0.5s ease-out;                /* Basic */
  animation: fadeIn 0.5s ease-out forwards;       /* Keep final state */
  animation: pulse 2s ease-in-out infinite;       /* Loop */
  animation: spin 1s linear infinite;             /* Spin loader */
  animation: fadeIn 0.5s ease 0.2s both;         /* With delay */
  animation-play-state: paused;                   /* Pause animation */
}

/* TRANSFORMS */
transform: translateX(20px);
transform: translateY(-10px);
transform: translate(20px, -10px);
transform: rotate(45deg);
transform: rotateX(180deg);
transform: scale(1.2);
transform: scale(1.2, 0.8);
transform: skew(10deg, 5deg);
transform: perspective(500px) rotateY(30deg);

/* Chain transforms */
transform: translateY(-5px) scale(1.02) rotate(2deg);

transform-origin: center;    /* Default */
transform-origin: top left;
transform-origin: 50% 100%;

📱 Media Queries

/* Breakpoints (common — adapt to your design) */
/* Mobile first — styles apply from smallest up */

/* Base styles — mobile */
.container { padding: 1rem; }

/* Small tablets and up */
@media (min-width: 576px) {
  .container { padding: 1.5rem; }
}

/* Tablets */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Laptops */
@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktops */
@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}

/* Max-width (desktop-first approach) */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

/* Range */
@media (min-width: 768px) and (max-width: 1024px) { }

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

/* Interaction */
@media (hover: hover) { }         /* Devices with hover capability */
@media (hover: none) { }          /* Touch devices */
@media (pointer: coarse) { }      /* Touch input */
@media (pointer: fine) { }        /* Mouse input */

/* Preferences */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f1a;
    --color-text: #e0e0e0;
  }
}

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

/* Print */
@media print {
  .no-print { display: none; }
  body { color: black; background: white; }
}

🛠️ Common Patterns

/* Center anything with Flexbox */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center vertically in viewport */
.full-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom scrollbar (Chrome/Edge) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #6c63ff; border-radius: 4px; }

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

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

/* Aspect ratio */
.video-wrapper { aspect-ratio: 16 / 9; }
.square { aspect-ratio: 1; }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible (accessible focus ring) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Remove default button styles */
.btn-reset {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #6c63ff, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

→ Related: Web Development Essentials Guide | Build Your First Web App Tutorial | CSS Glossary Terms