Free Computer Courses

CSS Cheatsheet

Updated September 2026 · Quick reference

View saved

CSS controls how HTML looks: colors, spacing, layout, and responsive behavior across screen sizes.

Use this sheet when you need a compact reminder of common selectors and properties. Follow the CSS tutorials for full explanations and practice pages.

Full lessons: CSS Tutorials

Selectors

Element, class, id

Type selectors target tags; classes (dot) are reusable; IDs (hash) should be unique on the page.

p { line-height: 1.5; }
.card { padding: 1rem; }
#hero { min-height: 50vh; }

Descendant & child

A space matches any nested match; > matches only direct children.

nav a { text-decoration: none; }
ul > li { margin-bottom: 0.25rem; }

Attribute selectors

Match elements by attribute presence or value—handy for links and form states.

a[href^="https"] { color: teal; }
input[type="email"] { width: 100%; }

Pseudo-classes

Style states like hover, focus, and first-child without extra markup.

a:hover { text-decoration: underline; }
button:focus-visible { outline: 2px solid navy; }

Pseudo-elements

Style parts of an element such as the first line or generated content.

p::first-line { font-weight: 600; }
.quote::before { content: "“"; }

Specificity tip

IDs beat classes beat elements. Prefer classes over IDs for styling so overrides stay manageable.

/* Prefer */
.btn-primary { }
/* Avoid fighting */
#submit { }

Box model

content-box vs border-box

With border-box, width includes padding and border—usually easier for layouts.

*, *::before, *::after {
  box-sizing: border-box;
}

width & height

Set content size; max-width keeps wide screens from stretching text too far.

.page {
  width: 100%;
  max-width: 40rem;
}

margin

Outer space around an element. Vertical margins can collapse between block siblings.

.section {
  margin: 2rem 0;
}

padding

Inner space between the border and content. Does not collapse like margin.

.card {
  padding: 1rem 1.25rem;
}

border

Drawn between padding and margin. Shorthand covers width, style, and color.

.panel {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}

display

Controls how an element participates in layout: block, inline, inline-block, none, flex, grid, and more.

.sr-only { display: none; } /* prefer accessibility-friendly hide patterns when needed */
span.badge { display: inline-block; }

Text & color

font-family

List fallbacks ending with a generic family. Quote multi-word font names.

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
}

font-size & weight

Size text with rem for scalability; weight uses keywords or numeric values.

h1 { font-size: 2rem; font-weight: 700; }
p { font-size: 1rem; }

line-height & alignment

Comfortable line-height improves reading. Align text with text-align.

p {
  line-height: 1.6;
  text-align: left;
}

color & background

Set foreground with color and fill with background (color, image, or gradient).

.banner {
  color: #102a43;
  background: linear-gradient(#f0f4f8, #d9e2ec);
}

text decoration & transform

Underline links carefully; transform changes casing without rewriting content.

a { text-decoration: underline; }
.label { text-transform: uppercase; letter-spacing: 0.04em; }

Layout (Flex/Grid)

Flex container

Flexbox aligns items in a row or column and distributes free space.

.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

justify & align

justify-content works along the main axis; align-items on the cross axis.

.row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

flex item growth

Control how items grow, shrink, and start sizing with flex shorthand.

.main { flex: 1 1 auto; }
.aside { flex: 0 0 12rem; }

Grid container

CSS Grid places items in rows and columns. Define tracks with fr, lengths, or repeat.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Grid placement

Place items by line numbers or areas for two-dimensional layouts.

.hero { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 4; }

gap

Spacing between flex or grid items without manual margins on every child.

.cards {
  display: grid;
  gap: 1rem 1.5rem;
}

Responsive

Mobile-first media queries

Start with base styles, then add rules for wider viewports with min-width.

.nav { flex-direction: column; }
@media (min-width: 48rem) {
  .nav { flex-direction: row; }
}

Fluid widths

Prefer percentages, fr, and max-width over fixed pixel layouts.

img {
  max-width: 100%;
  height: auto;
}

Flexible type

Clamp font size between a minimum and maximum so text scales smoothly.

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

Responsive images

Serve appropriate sizes with srcset/sizes or CSS that never overflows the container.

Classroom

Container-friendly units

Use rem for typography tied to root size; vw/% for viewport or parent relative sizing.

.wrap { width: min(100% - 2rem, 64rem); margin-inline: auto; }

Useful properties

Custom properties

CSS variables store reusable values and can change inside a selector scope.

:root { --brand: #0b6e4f; }
.button { background: var(--brand); }

position

Static is normal flow; relative offsets in place; absolute/fixed position against a containing block.

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

overflow

Control clipped content: visible, hidden, auto, or scroll.

.panel {
  max-height: 12rem;
  overflow: auto;
}

transition

Smooth property changes on hover or class toggles. Keep durations short for UI feedback.

.btn {
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn:hover { transform: translateY(-1px); }

z-index

Stacks positioned elements. Only applies when position is not static (or with certain flex/grid contexts).

.modal {
  position: fixed;
  z-index: 1000;
}

object-fit

How replaced content like images fill their box without distorting awkwardly.

.thumb {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
}

Related learning

Comments

One comment per signed-in account. Comments are saved with this page’s URL.