CSS Cheatsheet

Basics

Use this CSS reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Anatomy of a Rule

selector {
  property: value;           /* declaration */
  property: value1 value2;   /* multiple values */
}

A ruleset = selector + declaration block. A declaration = property + colon + value + semicolon. Whitespace is insignificant except inside strings.

Use this CSS cheatsheet when you move from algorithm practice into real frontend project work: it gives quick syntax for styling forms, dashboards, portfolio apps, and interview take-home screens without leaving the browser reference flow.

/* Comments: block only, no // */
/* Can span
   multiple lines */

Cascade, Specificity, and Inheritance

Cascade order (later wins when specificity is equal): 1. Browser default styles 2. Author stylesheets (in source order) 3. !important declarations

Specificity — calculated as (inline, id, class/attr/pseudo-class, element/pseudo-element):

Selector	Specificity
`*`	0-0-0-0
`div`	0-0-0-1
`.cls`, `[attr]`, `:hover`	0-0-1-0
`#id`	0-1-0-0
`style=""` (inline)	1-0-0-0
`!important`	overrides all

p { color: red; }              /* 0-0-0-1 */
.text { color: blue; }         /* 0-0-1-0 — wins */
#main p { color: green; }      /* 0-1-0-1 */
p { color: purple !important; }/* overrides everything */

Inherited properties (pass from parent by default): color, font-*, line-height, letter-spacing, text-*, visibility, cursor, list-style-*, quotes.

Non-inherited (reset to initial): margin, padding, border, background, width, height, display, position, float.

.child { color: inherit; }       /* force inherit */
.other { color: initial; }       /* reset to spec initial */
.more  { color: unset; }         /* inherit if inheritable, else initial */
.reset { color: revert; }        /* revert to user-agent stylesheet */
.rl    { color: revert-layer; }  /* revert to previous cascade layer */

Linking and Loading Stylesheets

<!-- external (preferred) -->
<link rel="stylesheet" href="styles.css">

<!-- scoped to media -->
<link rel="stylesheet" href="print.css" media="print">

<!-- inline in <head> -->
<style>
  body { margin: 0; }
</style>

<!-- inline on element (highest specificity) -->
<p style="color: red;">text</p>

/* @import inside CSS — blocks parallel loading, prefer <link> */
@import url("reset.css");
@import url("theme.css") screen;
@import "mobile.css" screen and (max-width: 600px);
/* must appear before any other rules except @charset and @layer */

`@charset`

/* must be the very first statement if used */
@charset "UTF-8";

Units

Absolute Units

Unit	Meaning
`px`	CSS pixel (1/96 in)
`pt`	point (1/72 in)
`pc`	pica (12pt)
`cm`, `mm`, `in`	physical measurements
`Q`	quarter-millimeter

Relative Units

Unit	Relative to
`em`	current element's `font-size`
`rem`	root (`<html>`) `font-size`
`ex`	x-height of current font
`ch`	width of "0" glyph in current font
`lh`	line height of current element
`rlh`	line height of root element
`%`	parent (meaning is property-specific)
`vw`	1% of viewport width
`vh`	1% of viewport height
`vmin`	smaller of vw/vh
`vmax`	larger of vw/vh
`svh`, `lvh`, `dvh`	small/large/dynamic viewport height
`svw`, `lvw`, `dvw`	small/large/dynamic viewport width
`cqw`, `cqh`	1% of container query width/height
`cqi`, `cqb`	1% of container inline/block size

html  { font-size: 16px; }
h1    { font-size: 2rem; }      /* 32px */
p     { padding: 1em; }         /* relative to own font-size */
.hero { height: 100dvh; }       /* full dynamic viewport */
.col  { max-width: 65ch; }      /* ~65 characters */

Math Functions

.box {
  width: calc(100% - 2rem);              /* mix units */
  font-size: clamp(1rem, 2.5vw, 2rem);  /* min, preferred, max */
  padding: min(5%, 2rem);                /* smaller of two */
  margin: max(1rem, 2vw);               /* larger of two */
  width: round(nearest, 33.33%, 1px);   /* CSS Values 4 */
  transform: translateX(sin(45deg) * 100px);
}

Shorthand Properties

/* margin / padding — top right bottom left (clockwise) */
margin: 10px;                      /* all sides */
margin: 10px 20px;                 /* top/bottom  left/right */
margin: 10px 20px 30px;            /* top  left/right  bottom */
margin: 10px 20px 30px 40px;       /* top right bottom left */

/* border */
border: 1px solid #ccc;            /* width style color */

/* font */
font: italic 600 1.2rem/1.5 "Inter", sans-serif;
/* style weight size/line-height family */

/* background */
background: #fff url("img.png") no-repeat center / cover;

/* transition */
transition: color 0.2s ease, opacity 0.3s;

/* animation */
animation: slide 0.4s ease-out forwards;

Shorthands reset unspecified sub-properties to their initial values. Use longhands when overriding only one side.

Value Keywords

Keyword	Meaning
`inherit`	Use parent's computed value
`initial`	Spec-defined initial value
`unset`	`inherit` if inheritable, else `initial`
`revert`	Reset to user-agent stylesheet
`revert-layer`	Reset to previous cascade layer
`auto`	Browser-computed (property-specific)
`none`	Disable / no value
`normal`	Property's "normal" state
`currentColor`	Current `color` value
`transparent`	Fully transparent (`rgba(0,0,0,0)`)

At-Rules Overview

At-rule	Purpose
`@charset`	Declare file encoding
`@import`	Import another stylesheet
`@layer`	Declare cascade layer
`@media`	Conditional by media feature
`@supports`	Conditional by CSS feature support
`@keyframes`	Define animation keyframes
`@font-face`	Define custom font
`@container`	Container queries
`@property`	Register typed custom property
`@counter-style`	Custom list counter
`@page`	Print page styles
`@namespace`	XML namespace

Cascade Layers

/* Declare order first — later layers win */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}
@layer base {
  body { margin: 0; font-family: system-ui, sans-serif; }
}
@layer components {
  .btn { padding: 0.5rem 1rem; }
}
/* Unlayered styles always beat all @layer rules */

`@supports`

@supports (display: grid) {
  .layout { display: grid; }
}
@supports not (display: grid) {
  .layout { display: flex; }
}
@supports (display: grid) and (gap: 1rem) {
  /* both features supported */
}
@supports (display: grid) or (display: -ms-grid) {
  /* either supported */
}
@supports selector(:has(a)) {
  /* :has() selector supported */
}

`display` Values

display: block;        /* stacks vertically, full width */
display: inline;       /* flows in text, ignores width/height */
display: inline-block; /* inline flow + block sizing */
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: none;         /* removed from layout entirely */
display: contents;     /* element invisible; children promoted */
display: flow-root;    /* creates new Block Formatting Context */
display: table;        /* like <table> */
display: list-item;    /* generates list marker */

`visibility` and `opacity`

visibility: hidden;  /* invisible, still occupies space */
display: none;       /* invisible, removed from layout */
opacity: 0;          /* invisible, occupies space, receives pointer events */

`overflow`

overflow: visible;  /* default — overflows container */
overflow: hidden;   /* clips overflow */
overflow: scroll;   /* always shows scrollbars */
overflow: auto;     /* scrollbars only when content overflows */
overflow: clip;     /* clips; no scroll context created */

overflow-x: auto;
overflow-y: hidden;
overflow: hidden auto; /* x then y */

`all` Property

.reset {
  all: initial;       /* reset all properties to initial values */
  all: inherit;       /* inherit all from parent */
  all: unset;         /* unset all properties */
  all: revert;        /* revert to user-agent defaults */
  all: revert-layer;  /* revert to previous cascade layer */
}

Custom Properties (Quick Reference)

:root {
  --color-brand: #3b82f6;
  --spacing-md: 1rem;
}
.btn {
  background: var(--color-brand);
  padding: var(--spacing-md, 0.75rem); /* second arg is fallback */
}

Full coverage in the Variables cheatsheet.

Common Global Reset

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video, svg {
  max-width: 100%;
  display: block;
}
input, button, textarea, select {
  font: inherit;
}