The CSS you look up most often, with the values the site's CSS generators produce. Try them in the CSS Unit Converter, CSS Box Shadow Generator, CSS Border Radius Generator, CSS Gradient Generator, CSS clamp() Generator, CSS Grid Generator and Cubic Bezier Generator.
Units
| Unit | Relative to | Use for |
|---|---|---|
px |
A CSS pixel (1/96 inch) | Borders, hairlines, shadows |
rem |
Root font size (usually 16px) | Font sizes and spacing that follow user settings |
em |
Font size of the element itself | Padding that should scale with text |
% |
The parent's matching property | Widths and fluid layouts |
vw vh |
1% of the viewport width or height | Full-screen sections, fluid type |
dvh |
Dynamic viewport height (mobile toolbars) | Full-height layouts on phones |
ch |
Width of the character 0 |
Readable line lengths such as 65ch |
fr |
A share of free space in a grid | Grid columns and rows |
24px is 1.5rem at the default 16px root size; the CSS Unit Converter handles the arithmetic.
Shorthands
- Four values go clockwise from the top:
margin: top right bottom left. Two values arevertical horizontal; one value sets all four. - Box shadow:
box-shadow: offset-x offset-y blur spread color, withinsetfirst for an inner shadow. Example:box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25); - Border radius: one to four corners from top-left clockwise.
border-radius: 8px 8px 8px 8px;rounds all corners;border-radius: 50%makes a circle from a square. - Gradient:
linear-gradient(135deg, #667eea, #764ba2). The angle0degpoints up,90degright and135degtoward the bottom right. Useradial-gradient(circle, a, b)for a radial one.
Fluid type with clamp()
clamp(min, preferred, max) keeps a value between a minimum and maximum while the middle term scales with the viewport. To grow from 16px at a 320px viewport to 32px at 1280px, the generator produces clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Keep the maximum below about 2.5 times the minimum so text can still reach 200% zoom.
Grid and flex in one line each
- Responsive card grid, no media queries:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; - Center anything:
display: grid; place-items: center; - Flexible item:
flex: 1 1 0shares space equally;flex: 0 0 autokeeps natural size.
Easing curves
| Keyword | Curve |
|---|---|
linear |
cubic-bezier(0, 0, 1, 1) |
ease |
cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in |
cubic-bezier(0.42, 0, 1, 1) |
ease-out |
cubic-bezier(0, 0, 0.58, 1) |
ease-in-out |
cubic-bezier(0.42, 0, 0.58, 1) |
Design your own with the Cubic Bezier Generator.
Specificity
Specificity is counted as (IDs, classes and pseudo-classes, elements), compared left to right. #nav .item a:hover is (1, 2, 1) and beats any selector without an ID. Inline styles beat all of them, and !important overrides specificity, so avoid it.
Colour contrast
WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). Black on white is 21:1 and #767676 on white is 4.54:1, the lightest grey that passes for body text. Check pairs with the Color Contrast Checker; see How Color and Contrast Work.