Skip to main content
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.
Semantic CSS styles the PDF output, not the browser interface. It cannot load fonts, images, scripts, or other resources, and it cannot create new resume content.

​
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.
1

Open Custom Styles

Open the resume in the builder, select Design, then select Custom Styles.
2

Review the converted draft

Check the preview and warnings below the editor. The draft starts with @version 1;.
3

Activate Semantic CSS

Select Activate Semantic CSS only after the preview matches the legacy result. Reactive Resume never applies both systems at once, and keeps the original legacy rules available for rollback.

​
Make your first change

Open the resume you want to style, select Design, then select Custom Styles. Start with a complete stylesheet:
The first line tells Reactive Resume which language version the stylesheet uses. Keep @version 1; at the start of every stylesheet.
1

Paste one focused rule

Add the stylesheet to the editor. Start with one visual change so it is easy to review in the preview.
2

Wait for Applied

Reactive Resume checks the source and the PDF result. When the status changes to Applied, compare the preview and export if you are ready to share the resume.
3

Build on the working rule

Add one related change at a time. The editor keeps your draft, undo history, and last valid stylesheet separately.

​
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().
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.
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.

​
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.

​
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.
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.
size applies only to page and must be outside @media. PDF media queries use the authored PDF dimensions, not the browser viewport.
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.
Review the PDF preview before exporting or sharing a resume with Custom Styles. PDF pagination and template-specific details can make a valid stylesheet look different from what you intended.

​
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.