CSS Cheatsheet

CSS (Cascading Style Sheets) controls the look and layout of web pages. This cheatsheet covers selectors, layout, and the properties you use most.

Selectors

Target elements to style.

.class { }              /* class */
#id { }                 /* id */
div p { }               /* descendant */
a:hover { }             /* pseudo-class */
li:nth-child(2) { }     /* structural */
[type="text"] { }       /* attribute */

Box Model

Spacing and sizing.

.box {
  margin: 10px;          /* outside space */
  padding: 20px;         /* inside space */
  border: 1px solid #333;
  box-sizing: border-box; /* include padding in width */
}

Flexbox

One-dimensional layout.

.container {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 16px;
  flex-wrap: wrap;
}

Grid

Two-dimensional layout.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.span { grid-column: span 2; }

Typography

Fonts and text.

.text {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

Colors & Backgrounds

Fills and gradients.

.el {
  color: #1a1a1a;
  background: #f5f5f5;
  background: linear-gradient(90deg, #f06, #48f);
  opacity: 0.9;
}

Positioning

Control placement.

.rel { position: relative; }
.abs { position: absolute; top: 0; right: 0; }
.fixed { position: fixed; bottom: 20px; }
.sticky { position: sticky; top: 0; }

Responsive Design

Adapt across screen sizes.

@media (max-width: 768px) {
  .container { flex-direction: column; }
}

Transitions

Smooth animations.

.btn {
  transition: transform 0.2s ease, background 0.2s;
}
.btn:hover { transform: scale(1.05); }

---

CSS gives you full control over presentation. Master flexbox and grid for layout, then explore custom properties, animations, and utility frameworks like Tailwind.

For full documentation, see https://developer.mozilla.org/en-US/docs/Web/CSS