selectors { property: value; ... }
/* examples */
body { padding: 5%; background-color: #ddd; }
h1 { font-size: 2rem; color: steelblue; }
.note { font-style: italic; margin-left: 1rem; }htmltags: body, div, span, img, ...
custom-tags: nav-keys, spacer-10, ...
.classnames: .indent, .undent, .photo, ...
#idnames: #placeHolder, #mastheadPhoto, ...
pseudo-classes: a:link, a:hover, ...
pseudo-elements: p::first-letter, p::first-line, ...
attributes: [attr], [attr=value], ...s1, s2, ... applies to both s1 and s2
s1 s2 applies to s2 anywhere inside s1 (descendant)
s1 > s2 applies to s2 only when s1 is its direct parent
s1 + s2 applies to s2 if s1 is its adjacent preceding sibling
s1 ~ s2 applies to s2 if s1 is any preceding sibling| Group | Property | Predefined Keywords |
|---|---|---|
| Global (work on almost all properties) | ||
| Global | (any property) | inherit, initial, unset, revert, revert-layer |
| Display & positioning | ||
| Display | display | none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, flow-root, contents, list-item, table, table-row, table-cell |
| Positioning | position | static, relative, absolute, fixed, sticky |
| Overflow | overflow | visible, hidden, clip, scroll, auto |
| Visibility | visibility | visible, hidden, collapse |
| Box sizing | box-sizing | content-box, border-box |
| Borders, outlines & text decoration | ||
| Border/Outline style | border-style, outline-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| Text decoration style | text-decoration-style | solid, double, dotted, dashed, wavy |
| Text decoration line | text-decoration-line | none, underline, overline, line-through |
| Backgrounds & images | ||
| Background repeat | background-repeat | repeat, repeat-x, repeat-y, no-repeat, space, round |
| Background attachment | background-attachment | scroll, fixed, local |
| Background size | background-size | auto, cover, contain |
| Object fit | object-fit | fill, contain, cover, none, scale-down |
| Typography | ||
| Font family | font-family | serif, sans-serif, monospace, cursive, fantasy, system-ui, ui-serif, ui-sans-serif, ui-monospace |
| Font style | font-style | normal, italic, oblique |
| Font weight | font-weight | normal (400), bold (700), lighter, bolder, 100–900 |
| Text transform | text-transform | none, capitalize, uppercase, lowercase |
| Text align | text-align | start, end, left, right, center, justify |
| White space | white-space | normal, nowrap, pre, pre-wrap, pre-line, break-spaces |
| Text overflow | text-overflow | clip, ellipsis |
| Lists | ||
| List style type | list-style-type | none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha |
| List position | list-style-position | inside, outside |
| Floats & clears | ||
| Float | float | left, right, none, inline-start, inline-end |
| Clear | clear | left, right, both, none |
| Table layout | ||
| Border collapse | border-collapse | separate, collapse |
| Table layout | table-layout | auto, fixed |
| Effects & misc | ||
| Cursor | cursor | auto, default, pointer, text, move, wait, crosshair, not-allowed, help, progress |
| Resize | resize | none, both, horizontal, vertical |
| Pointer events | pointer-events | auto, none |
| Mix blend mode | mix-blend-mode | normal, multiply, screen, overlay, darken, lighten, difference, exclusion, hue, saturation, color, luminosity |
| Selector | Description | Example |
|---|---|---|
| Basic selectors | ||
Universal (*) | All elements | * { margin: 0; } |
| Type (element) | All instances of an element | p { color: blue; } |
Class (.class) | Elements with a given class | .note { font-style: italic; } |
ID (#id) | Single element with given ID | #header { background: gray; } |
| Attribute selectors | ||
[attr] | Elements with the given attribute | [title] { border: 1px solid; } |
[attr=value] | Attr equals value exactly | input[type="text"] { width: 200px; } |
[attr^=value] | Attr starts with string | a[href^="https"] { color: green; } |
[attr$=value] | Attr ends with string | a[href$=".pdf"] { color: red; } |
[attr*=value] | Attr contains substring | [class*="warning"] { color: orange; } |
| Combinators | ||
Descendant (A B) | B inside A at any depth | div p { line-height: 1.5; } |
Child (A > B) | B is direct child of A | ul > li { list-style: none; } |
Adjacent sibling (A + B) | B immediately after A | h1 + p { font-size: 1.2em; } |
General sibling (A ~ B) | B preceded by A (any distance) | h1 ~ p { color: gray; } |
| Pseudo-classes | ||
:hover | Element under mouse pointer | a:hover { text-decoration: underline; } |
:focus | Element that has keyboard focus | input:focus { outline: 2px solid blue; } |
:first-child | First child of its parent | p:first-child { font-weight: bold; } |
:last-child | Last child of its parent | p:last-child { color: blue; } |
:nth-child(n) | nth child, pattern-based | li:nth-child(2n) { background: #eee; } |
:not(selector) | Excludes matching elements | p:not(.note) { color: black; } |
:checked | Checked radio/checkbox | input:checked { outline: 2px solid blue; } |
:disabled / :enabled | Form element state | input:disabled { opacity: 0.4; } |
:empty | Element with no children | td:empty { background: #fdd; } |
| Pseudo-elements | ||
::before | Generated content before element | p::before { content: "→ "; } |
::after | Generated content after element | p::after { content: " ★"; } |
::first-line | First rendered line of text | p::first-line { font-weight: bold; } |
::first-letter | First rendered letter | p::first-letter { font-size: 2em; } |
::selection | User-selected text | ::selection { background: yellow; } |
::placeholder | Form input placeholder text | input::placeholder { color: #aaa; } |
| Rule | Description | Example |
|---|---|---|
| Importance | Declarations marked !important override all other rules at the same origin. Use sparingly — hard to override. |
p { color: blue !important; } |
| Origin | Styles come from browser defaults, user styles, or author (your) styles. Author styles normally override browser defaults. | body { margin: 0; } overrides browser default margin |
| Specificity | Each selector has a weight score: inline styles (1000) > ID (100) > class/attribute/pseudo-class (10) > type/pseudo-element (1). Higher specificity wins. | #id {} beats .class {};div.note {} beats div {} |
| Source Order | When specificity and importance are equal, the later rule in the CSS source wins. | p { color: red; } then p { color: blue; } → blue |
| Cascade | The combined process (importance → origin → specificity → order) that determines the final applied style. | Think: "last resort tiebreaker is order" |
| Inheritance | Properties like font and color propagate from parent to child. Layout properties like margin and border do not inherit. |
body { color: green; } → all child text is green unless overridden |
| Unit | Category | Description / Example |
|---|---|---|
| Absolute lengths | ||
px | Absolute | CSS reference pixel (device-independent). width: 200px; |
pt, pc | Absolute | Points (1/72 in), picas (12 pt). font-size: 12pt; |
| Relative lengths | ||
em | Relative to element | Multiple of element's own font-size. padding: 2em; |
rem | Relative to root | Multiple of the root (html) font-size. font-size: 1.5rem; |
ch | Relative to font | Width of the "0" glyph in current font. width: 40ch; |
% | Relative | Percentage of the parent's value for the same property. width: 50%; |
| Viewport units | ||
vw, vh | Viewport | 1% of viewport width/height. height: 100vh; |
vmin, vmax | Viewport | 1% of smaller/larger viewport dimension. font-size: 5vmin; |
dvh, dvw | Dynamic viewport | 1% of current viewport — adjusts as browser UI (mobile toolbar) appears or disappears. min-height: 100dvh; |
lvh, lvw | Large viewport | 1% of the largest possible viewport (mobile toolbar hidden). header { height: 100lvh; } |
svh, svw | Small viewport | 1% of the smallest possible viewport (mobile toolbar shown). aside { height: 100svh; } |
| Angle & time | ||
deg, rad, turn | Angle | Degrees, radians, full rotations. transform: rotate(45deg); |
s, ms | Time | Seconds / milliseconds. transition: all 300ms; |
| Functional | ||
calc() | Math | Mixed-unit arithmetic. width: calc(100% - 2rem); |
min(), max() | Constraint | Choose the smaller/larger of given values. width: min(100%, 60rem); |
clamp() | Range | Constrain to a min–max range. font-size: clamp(1rem, 2vw, 2rem); |
| Reference | Description |
|---|---|
| CSS Reference — MDN | Authoritative property-by-property reference with examples and browser support notes. |
| CSS Reference — w3schools | Concise reference with interactive try-it examples. |
| cssreference.io | Visual reference — each property shown with live rendering demos. |
| Intro to CSS — MDN | Guided introduction covering fundamentals through layout. |
| CSS Tutorial — w3schools | Interactive beginner-to-intermediate tutorials with live examples. |
| Cascade & Inheritance — MDN | Deep dive into how style conflicts are resolved. |
| Selectors Specification (CSSWG) | Living draft for CSS selectors module. |
| CSS Specifications — W3C | Index of all CSS module specifications from the W3C. |
| Units of Measure — W3C | Authoritative reference for CSS length and measurement units. |
| Timeless Web Dev Articles — CSS-Tricks | Curated collection of essential CSS articles. |
| CSS Reference — Codrops | Well-illustrated property reference with live demos. |