Applying Custom Styles

Custom Styles let you make focused changes that are not available in the regular Design, Typography, Layout, Page, and Picture settings. They use Semantic CSS, a CSS-like language designed for resume PDFs.

Convert existing Custom Styles

If a resume still uses the previous Custom Styles form, Reactive Resume creates a converted stylesheet draft. Your current rules remain active while you review it.

Make your first change

Open the resume you want to style, select Design, then select Custom Styles. Start with a complete stylesheet:

@version 1;

section[type="experience"] > section-heading {
	color: #0f766e;
	text-transform: uppercase;
}

The first line tells Reactive Resume which language version the stylesheet uses. Keep @version 1; at the start of every stylesheet.

Target the right part of your resume

Semantic CSS selectors describe resume content rather than a template's internal HTML. Selector and attribute names are lowercase and case-sensitive. Prefer semantic selectors when you want a style to work across resumes and templates.

Start with the resume structure

Target header and item content

Target rich text and lists

Narrow a selector with attributes

Use attributes to make a rule specific without relying on a template layout.

Semantic CSS supports selector lists, descendant ( ), child (>), adjacent sibling (+), and general sibling (~) combinators. It also supports :root, :first-child, :last-child, :only-child, :is(), :where(), :not(), :nth-child(), and :nth-of-type().

@version 1;

section[type="experience"] > section-heading {
	border-bottom: 1pt solid #0f766e;
}

region[placement="sidebar"] {
	background-color: #f8fafc;
	padding: 18pt;
}

section[id="projects"] {
	break-inside: avoid;
}

Use an exact id only for a resume-specific adjustment. A type, placement, role, or field name is usually a better choice when you expect to copy the stylesheet to another resume.

Reuse your builder settings

Semantic CSS exposes the resolved builder settings as read-only --resume-* variables. Define your own variables in :root, then reuse the builder values instead of duplicating colors or dimensions.

@version 1;

:root {
	--accent: var(--resume-primary-color);
	--rule: #cbd5e1;
}

section-heading {
	color: var(--accent);
	border-bottom: 1pt solid var(--rule);
	font-size: 11pt;
	font-weight: 600;
	letter-spacing: 0.4pt;
}

Changing the primary color or related setting in the builder updates the corresponding variable automatically. Do not assign a value to a --resume-* variable; create an author variable such as --accent instead.

Use pt for predictable PDF spacing and type sizes. Semantic CSS also accepts px, in, mm, cm, %, vw, vh, em, and rem where the property supports a length.

Style common resume content

The most useful declarations usually fall into a few groups:

Use display: none only to hide an existing semantic node. Semantic CSS cannot add, remove, duplicate, or re-parent resume data.

Style rich-text lists

list-item is the outer row that holds a marker and its content. Use it for row layout and spacing. Use list-marker for the bullet or number, and list-item-content for the text flow.

@version 1;

rich-text list-item {
	gap: 4pt;
}

list-marker {
	color: var(--resume-primary-color);
}

list-item-content {
	line-height: 1.35;
}

Style fields inside an item

Named fields let you make a focused change without styling every item value. Use the selector only where that field exists in the selected resume and template.

@version 1;

section[type="experience"] field[name="position"] {
	font-weight: 600;
}

section[type="experience"] field[name="company"] {
	color: var(--resume-primary-color);
}

Use template-specific parts carefully

Template parts expose optional visual details that are not shared by every template. Always guard a template-part rule with resume[template="..."]; otherwise the selector may match nothing after a template change.

@version 1;

resume[template="azurill"] template-part[name="timeline-line"] {
	background-color: #94a3b8;
}

Some template parts are wrappers, while others are attributes on an existing semantic node. Use the matching selector below.

Kakuna, Lapras, and Onyx do not expose template-specific parts. Use shared semantic selectors for portable styles.

Control pagination and PDF dimensions

Use structural declarations sparingly and review the exported PDF after each change. You can keep an item together, leave space before a section, or set a custom page size.

@version 1;

page {
	size: 210mm 297mm;
}

section {
	-resume-min-presence-ahead: 72pt;
}

item {
	break-inside: avoid;
}

size applies only to page and must be outside @media. PDF media queries use the authored PDF dimensions, not the browser viewport.

@version 1;

@media (max-width: 600pt) {
	region[placement="sidebar"] {
		padding: 12pt;
	}
}

Supported media features are width, min-width, max-width, height, min-height, max-height, and orientation: portrait or orientation: landscape.

Apply, diagnose, and recover safely

The editor saves your draft even when it has an error. The preview and PDF export continue using the last stylesheet that compiled and passed PDF checks, so a mistake does not replace a working result.

If a rule does not work:

1. Read the status below the editor. Errors include a line and column number when available.
2. Check the selector's spelling, attribute value, placement, and template guard. A selector matches nothing warning usually means the resume does not contain that semantic node.
3. Simplify the rule to one selector and one declaration, then wait for Applied before adding more.
4. Use Reset to applied stylesheet to discard the current draft, or use the stylesheet undo and redo controls to restore an earlier source and applied pair.

Select Open focus mode when you need a taller editor. On mobile, it opens a full-width sheet; switch to Preview to inspect the result.

Keep styles portable

When you copy a stylesheet to another resume, semantic section types, placements, roles, and fields are the safest starting point. Exact IDs and template parts are intentionally specific to a resume or template.

1. Select Copy stylesheet in the source resume.
2. Open Design -> Custom Styles in the destination resume.
3. Paste the stylesheet and review any warnings.
4. Replace or remove exact IDs and template-part rules that do not apply.
5. Wait for Applied, then compare the preview and exported PDF.

Semantic CSS does not support classes, pseudo-elements, CSS Grid, arbitrary at-rules, @import, @font-face, url(), browser APIs, animations, filters, gradients, general box shadows, or external assets. Use the normal builder settings when you need a font, image, or broader layout change.