CSS Common Properties Cheatsheet
Quick reference for frequently used CSS: typography, spacing, borders, display, and box model.
CSS Common Properties Cheatsheet
CSS (Cascading Style Sheets) is the language used to style and lay out HTML. With CSS you control colors, fonts, spacing, borders, and where elements sit on the page. HTML describes the structure and content. CSS describes how it looks. Keeping structure and presentation separate makes it easier to change the design or reuse the same HTML with different styles.
If your CSS doesn’t apply, check: the stylesheet path in your <link> or @import is correct, the server serves the file with type text/css, and the HTML has <!DOCTYPE html> so the browser uses standards mode. Wrong path or missing doctype are common causes.
Typography
font-size in rem scales with the user’s root font size (better for accessibility). 1rem is usually 16px. line-height without a unit is a multiplier (1.5 = one and a half times the font size). Good body default is 1.4–1.6.
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
}font-weight: 400 normal, 700 bold. text-align: left, center, right, justify. text-decoration: none, underline, line-through. Remove link underline: text-decoration: none. For small caps use font-variant-caps: small-caps (and a font that supports it). Single-line truncation with ellipsis: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; (the element needs a width or max-width).
Margin and padding
One value: all sides. Two: top/bottom, left/right. Four: top, right, bottom, left (clockwise). Center a block in its container: margin-inline: auto (with a width or max-width).
.container { max-width: 600px; margin-inline: auto; padding: 1rem; }
.card { padding: 1.25rem; margin-bottom: 1rem; }box-sizing: border-box makes width and height include padding and border. Set it on the root or a reset so layouts are predictable: *, *::before, *::after { box-sizing: border-box; }.
Margin vs padding. Use margin to create space between siblings or between an element and its container. Use padding for space inside the element (between the border and the content). Margins can collapse (two adjacent vertical margins become one). Padding does not collapse. When in doubt: padding for clickable area and inner spacing, margin for stacking or separating blocks.
Borders and shadow
Shorthand: width, style, color. border-radius rounds corners. Use 50% on a square element for a circle.
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}Focus ring that doesn’t change layout: outline draws outside the box. Use outline-offset so it doesn’t sit on the border. Prefer :focus-visible over :focus so the ring appears for keyboard focus but not on mouse click (browsers handle this when you use :focus-visible).
button:focus-visible,
a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}Links often need a visible focus style so keyboard users can see where they are. Don’t remove the outline without replacing it with something visible.
Display and visibility
display: block (stacked), inline (flow with text), inline-block (inline but you can set width/height), flex, grid, none (removed from layout). visibility: hidden hides the element but it still takes space. opacity: 0.5 (0–1) makes it semi-transparent and it still receives clicks unless you set pointer-events: none.
Icon next to text: wrap the icon in a span and use display: inline-block; vertical-align: middle so the line height doesn’t stretch it.
Sizing
Prefer max-width over width for fluid layouts. max-width: 65ch limits line length for readability (ch is the width of the “0” character). Full viewport height: min-height: 100vh. Fixed aspect ratio (e.g. video): aspect-ratio: 16 / 9.
article { max-width: 65ch; margin-inline: auto; }
.hero { min-height: 100vh; display: flex; align-items: center; }
.video-wrap { aspect-ratio: 16 / 9; }Cursor and selection
cursor: pointer for clickable things. cursor: not-allowed when disabled. user-select: none stops text selection (use sparingly, e.g. on buttons). pointer-events: none makes the element ignore clicks (e.g. overlay that should pass through to the content below).
Spacing scale. Many designs use a consistent scale (e.g. 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem) for margin and padding so the layout feels consistent. Define custom properties if you use the same values everywhere: --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem;.