css.md
# CSS
Selectors, specificity, the box model, and modern layout.
## Selectors
```css
.class #id element *
a, b group (both a and b)
a b descendant
a > b direct child
a + b a ~ b adjacent / general sibling
[type="text"] attribute
:hover :focus :nth-child(2n) :not(.x) pseudo-classes
::before ::after ::selection pseudo-elements
```
## Specificity & cascade
```css
/* inline(1000) > id(100) > class/attr/pseudo(10) > element(1) */
#nav .item a -> 0,1,1,1
.btn.primary -> 0,0,2,0
!important wins, but use sparingly
later rule breaks a tie; inheritance is weakest
```
## Box model
```css
* { box-sizing: border-box; } /* width includes padding + border */
margin: 0 auto; /* center a block */
padding: 1rem 2rem; /* y x */
gap: 1rem; /* spacing in flex / grid */
```
## Units & custom properties
```css
:root { --brand: #56e1d8; }
color: var(--brand);
font-size: clamp(1rem, 2.5vw, 1.5rem); /* fluid */
width: min(100%, 60ch);
/* rem=root em=parent % vh/vw fr(grid) ch */
```
## Flexbox
```css
.row {
display: flex;
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
flex-wrap: wrap;
gap: 1rem;
}
.item { flex: 1 1 200px; } /* grow shrink basis */
```
## Grid
```css
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.feature { grid-column: span 2; }
```
## Positioning
```css
position: relative | absolute | fixed | sticky;
inset: 0; /* top/right/bottom/left at once */
z-index: 10;
```
## Transitions & responsive
```css
transition: transform .2s ease, opacity .2s ease;
transform: translateY(-3px) scale(1.02);
@media (max-width: 640px) { .row { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
```