# CSS Cheatsheet

Quick reference for selectors, the cascade, the box model, Flexbox, Grid, and responsive design.

## Selectors

```css
*                    /* Universal */
h1                   /* Element / type */
.card                /* Class */
#main                /* ID */
[type="text"]        /* Attribute */
a:hover              /* Pseudo-class */
p::first-line        /* Pseudo-element */
```

## Combinators

```css
nav a                /* Descendant — any <a> inside <nav> */
nav > a              /* Child — direct children only */
h2 + p               /* Adjacent sibling — first <p> right after <h2> */
h2 ~ p               /* General sibling — all <p> after <h2> */
```

## Specificity (low → high)

1. `*` and combinators — 0
2. Type/element, pseudo-element — 1
3. Class, attribute, pseudo-class — 10
4. ID — 100
5. Inline `style="..."` — 1000
6. `!important` — overrides everything (avoid)

When two rules have equal specificity, the **last one wins**. This is the cascade.

## Box model

```
┌─────────────────── margin ──────────────────────┐
│  ┌─────────────── border ─────────────────┐    │
│  │  ┌─────────── padding ──────────┐     │    │
│  │  │       content (width × height) │     │    │
```

```css
* { box-sizing: border-box; }   /* Recommended: width includes padding+border */
```

## Common units

- `px` — fixed pixels
- `rem` — root font-size (use for spacing & typography)
- `em` — current element font-size
- `%` — relative to parent
- `vw` / `vh` — viewport width/height
- `fr` — fraction of available space (Grid only)

## Flexbox

```css
.container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | space-between | space-around;
  align-items: stretch | center | flex-start | flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.item {
  flex: 1;                 /* grow + shrink + basis shorthand */
  flex: 0 0 200px;         /* don't grow, don't shrink, basis 200px */
  align-self: center;
}
```

**Main axis** = flex-direction. **Cross axis** = perpendicular.
- `justify-content` works on the **main** axis.
- `align-items` works on the **cross** axis.

## Grid

```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
/* Responsive auto-fit grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.item { grid-column: 1 / 3; grid-row: 2 / 4; }
```

## Position

```css
position: static     /* default */
position: relative   /* offset from itself; still occupies original space */
position: absolute   /* offset from nearest positioned ancestor */
position: fixed      /* offset from viewport */
position: sticky     /* hybrid: scrolls with content, sticks at threshold */
```

## Responsive design

```css
/* Mobile-first media query */
.card { padding: 1rem; }

@media (min-width: 768px) {
  .card { padding: 2rem; }
}
```

Common breakpoints: `480px` (phones), `768px` (tablets), `1024px` (laptops), `1280px` (desktops).

## CSS variables

```css
:root {
  --primary: #4f46e5;
  --space-md: 1rem;
}
button { background: var(--primary); padding: var(--space-md); }
```

## Useful properties

| Property             | Notes                                             |
|----------------------|---------------------------------------------------|
| `display`            | `block` `inline` `inline-block` `flex` `grid` `none` |
| `overflow`           | `visible` `hidden` `scroll` `auto`                |
| `transition`         | `all 0.2s ease-in-out`                            |
| `transform`          | `translate()` `scale()` `rotate()`                |
| `box-shadow`         | `0 2px 10px rgba(0,0,0,0.1)`                      |
| `border-radius`      | `0.5rem` for rounded corners                      |
| `cursor: pointer`    | for clickable elements                            |
| `aspect-ratio: 16/9` | maintain image/video aspect                       |

## Tools

- MDN CSS reference: <https://developer.mozilla.org/en-US/docs/Web/CSS>
- Flexbox Froggy: <https://flexboxfroggy.com/>
- Grid Garden: <https://cssgridgarden.com/>
- Specificity calculator: <https://specificity.keegan.st/>