Selectors, the box model, layout, typography and the effect properties that do the real work in modern CSS. All rows are plain text - search to filter, click Copy to grab the pattern.
Reference rack
STATUSREADY
ROWS56
NETWORKLOCAL
MODEREFERENCE
| Item / pattern | What it means / how to use it | |
|---|---|---|
| * | Universal selector - matches every element; powerful but expensive, use sparingly. | |
| element | Type selector (p, div, a, section). | |
| .class | .btn - class selector, the workhorse of styling. | |
| #id | ID selector; IDs must be unique, prefer classes for styling. | |
| A B | Descendant combinator - any B inside A. | |
| A > B | Child combinator - a direct child B of A only. | |
| A + B | Adjacent sibling combinator - the first B immediately after A. | |
| A ~ B | General sibling combinator - any B that follows A. | |
| [attr="v"] | Attribute selector; also ^=, $= and *= for prefix, suffix and substring. | |
| :hover / :focus / :active | Interaction states; always include :focus so keyboard users see focus. | |
| :first-child / :last-child / :nth-child(2n) | Positional pseudo-classes for alternating rows and edge cases. | |
| :not(...) | Negation - input:not([type="submit"]) matches everything except submits. | |
| :is(...) / :where(...) | Forgiving selector lists; :where adds zero specificity for reset-style rules. | |
| :root | The document root - the classic home for custom properties. | |
| margin | Space outside the border; shorthand takes 1, 2, 3 or 4 values. | |
| padding | Space inside the border and around the content. | |
| border | Shorthand: border-width border-style border-color. | |
| width / height | Content-box dimensions before padding/border unless box-sizing says otherwise. | |
| box-sizing: border-box | Width and height now include padding and border; the default for grid systems. | |
| max-width: 100% | Keeps images and embeds from blowing out their container. | |
| overflow | hidden clips, auto adds scrollbars, scroll always shows them. | |
| display: block / inline / inline-block | The three basic display roles. | |
| display: flex | Flexbox: one-dimensional row or column layout. | |
| flex-direction / justify-content / align-items | Flex main-axis direction and alignment on both axes. | |
| flex: 1 | Grow-and-shrink shorthand; distributes leftover space evenly across siblings. | |
| display: grid | Two-dimensional layout with rows and columns. | |
| grid-template-columns: repeat(3, 1fr) | Defines columns; 1fr is an equal fraction of free space. | |
| gap | Space between grid or flex items; the shorthand for row-gap and column-gap. | |
| position: relative | Positioned, offset relative to its normal flow spot. | |
| position: absolute | Positioned relative to the nearest positioned ancestor. | |
| position: fixed | Positioned relative to the viewport - sticky navbars and FABs. | |
| position: sticky | Scrolls normally until a threshold, then sticks. | |
| top / right / bottom / left + z-index | Offsets from a positioned ancestor; z-index controls stacking order. | |
| font-family | Font stack: a comma-separated list of fallbacks; quote names with spaces. | |
| font-size / font-weight / font-style | Size, thickness (400 normal / 700 bold) and italics. | |
| line-height | Line spacing; use a unitless value (1.5) that scales with the font size. | |
| letter-spacing / text-transform | Tracking; and uppercase / lowercase / capitalize. | |
| text-align | left, right, center or justify. | |
| text-decoration | underline / line-through; remove link underlines with none. | |
| text-overflow: ellipsis | Truncates with ... but needs white-space: nowrap and overflow: hidden. | |
| color | Foreground text color. | |
| background | Shorthand: color, image, position, repeat, size. | |
| opacity | 0 to 1 transparency of the whole element. | |
| transition | Animate property changes: transition: all .2s ease. | |
| transform | rotate / scale / translate / skew; cheap to animate, no main-thread layout. | |
| animation + @keyframes | Declared keyframe sequences: name duration iteration. | |
| box-shadow | x y blur spread color; prefix with inset for an inner shadow. | |
| :root { --tone: #4338CA } + var(--tone) | Custom properties: they inherit, cascade, and can change in media queries or from JS. | |
| @media (max-width: 768px) | Responsive breakpoint rulesets. | |
| @import | Pulls in another stylesheet - render-blocking, prefer a <link> tag. | |
| !important | Escalates specificity; avoid except as a last resort. | |
| cursor: pointer | Hand cursor on interactive elements. | |
| object-fit: cover | Fills a box without distortion, cropping the overflow (images, video). | |
| aspect-ratio | Declares a width/height ratio such as 1 / 1 or 16 / 9 for responsive media. | |
| clamp(min, pre, max) | Fluid value that scales between bounds, great for font-size. | |
| inset | Shorthand for top / right / bottom / left. |