A quick reference for CSS properties and values. Covers Flexbox, Grid, selectors, units, variables, media queries, box model, and animations.
Flexbox
| Property | Values / Example |
|---|---|
| display: flex | Enable flex container |
| flex-direction | row | row-reverse | column | column-reverse |
| justify-content | flex-start | center | space-between | space-around | space-evenly |
| align-items | stretch | flex-start | center | flex-end | baseline |
| flex-wrap | nowrap | wrap | wrap-reverse |
| gap | 8px, 1rem — space between flex items |
| flex: 1 | Shorthand for flex-grow:1 flex-shrink:1 flex-basis:0% |
| align-self | Override align-items for a single item |
Grid
| Property | Values / Example |
|---|---|
| display: grid | Enable grid container |
| grid-template-columns | repeat(3, 1fr) | 200px 1fr 200px |
| grid-template-rows | auto 1fr auto |
| grid-gap / gap | 16px — space between grid cells |
| grid-column | span 2 | 1 / 3 — column placement |
| grid-row | span 2 | 1 / -1 — row placement |
| grid-template-areas | Named grid areas for layout |
| place-items | center — shorthand for align-items + justify-items |
Selectors
| Selector | Description |
|---|---|
| .class | Select elements by class name |
| #id | Select element by ID |
| div > p | Direct child combinator |
| div + p | Adjacent sibling combinator |
| div ~ p | General sibling combinator |
| :hover | Mouse over state |
| :nth-child(2n) | Every even child element |
| ::before / ::after | Insert pseudo-element content |
Units
| Unit | Description |
|---|---|
| px | Absolute pixels |
| rem | Relative to root font size (16px default) |
| em | Relative to parent font size |
| % | Percentage of parent element |
| vw / vh | Percentage of viewport width / height |
| dvh | Dynamic viewport height (mobile-safe) |
| ch | Width of the "0" character |
| fr | Fractional unit for CSS Grid |
CSS Variables
| Syntax | Description |
|---|---|
| --color: #3b82f6 | Define a custom property |
| var(--color) | Use a custom property |
| var(--color, #000) | Use with fallback value |
| :root { --x: 1rem } | Define global variable on root |
| element.style.setProperty() | Set variable from JavaScript |
| @property --x { ... } | Register typed custom property |
Media Queries
| Query | Description |
|---|---|
| @media (max-width: 768px) | Styles for screens up to 768px |
| @media (min-width: 1024px) | Styles for screens 1024px and up |
| @media (prefers-color-scheme: dark) | Dark mode preference |
| @media (prefers-reduced-motion) | Reduced motion preference |
| @media print | Print stylesheet |
| @container (min-width: 400px) | Container query |
Box Model
| Property | Description |
|---|---|
| box-sizing: border-box | Width/height include padding and border |
| margin | Space outside the border |
| padding | Space inside the border |
| border | 1px solid #ccc — border shorthand |
| outline | Like border but does not affect layout |
| width / height | Element dimensions |
| max-width / min-width | Constrain element width |
| overflow | visible | hidden | scroll | auto |
Transitions & Animations
| Property | Description |
|---|---|
| transition | all 0.3s ease — shorthand |
| transition-property | opacity, transform — properties to animate |
| transition-duration | 300ms | 0.3s |
| transition-timing-function | ease | linear | ease-in-out | cubic-bezier() |
| @keyframes name { } | Define animation keyframes |
| animation | name 1s ease infinite — shorthand |
| animation-delay | Time before animation starts |
| transform | translate() rotate() scale() |