Applying custom styles

Custom styles let you change details the Design controls don't cover, such as the color of one entry, the spacing between skills, or a border under every section heading. You write them in a CSS-like language called Semantic CSS, and they apply to the PDF: the page preview, PDF downloads, and your public resume. DOCX and Markdown exports don't use them.

Try the regular Design controls first (template, type, color, page and layout). They cover most changes and keep working when you switch templates. Reach for custom styles when you want something specific.

Before you startCopy Anchor Link

• Custom styles are per resume. Each resume has its own stylesheet.
• The editor reports fatal stylesheet limits. Unsupported declarations or selectors may still be skipped; the engine limitations are listed beside the editor. If you see no change on the page, check those limits. See When a rule has no effect.
• Custom styles can't add content, load fonts or images, or change what a section contains. They only restyle what's already on the page.

Open the stylesheet editorCopy Anchor Link

On a phone, Design opens as a sheet over the page. Select the Page tab, then select Advanced under the page settings.

Style one section or entryCopy Anchor Link

The quickest way to start is to pick the thing you want to change on the page.

A picked rule looks like this:

/* Education › University of Washington */
section[id="education"] item[id="019bef5a-93e4-7746-ad39-48455f6cef9e"] {
  color: #0f766e;
}

If the stylesheet already has a rule with that exact selector, clicking the element moves your cursor into the existing rule instead of adding another one.

Rules made this way use the entry's ID, so they only affect that one entry in this resume. To style every entry of a kind, use the section type instead (see Target the right part of your resume).

Find an entry by nameCopy Anchor Link

You can also add an entry's selector without clicking the page. Where a selector goes (outside any { }), start typing part of the entry's title, such as Senior. The suggestions include matching sections and entries, shown as "Section › Entry". Choose one to insert its selector.

Autocomplete also suggests element names and attributes in selectors, property names inside a rule, and values after a colon, including your own variables and the read-only --resume-* variables. Press Ctrl

Space to open the suggestions without typing.

A few more editor helpers:

• Hover an element name, property or --resume-* variable to see a short description.
• Color swatches appear after color values. Click one to pick a color from presets or a custom picker; the value in your CSS changes with it.
• Search with ⌘ F (Ctrl F on Windows and Linux).

Use the editor toolbarCopy Anchor Link

While typing in the stylesheet editor, ⌘ Z and ⌘ Shift

Z use the editor's local text history. The toolbar buttons use your resume's shared history, so they can also reverse a template switch or another resume change. See Undoing changes and version history.

Your stylesheet saves automatically with the rest of the resume, and it's part of every saved version in History.

When a rule has no effectCopy Anchor Link

Fatal stylesheet errors appear above the editor. For individual rules, the PDF engine applies what it understands and skips the rest: an unsupported declaration is skipped on its own, and a rule with an invalid selector is skipped as a whole. If a change doesn't show:

1. Check the selector matches something. Put your cursor inside the rule. If nothing is outlined on the page, the selector matches nothing. Check spelling (names are lowercase and case-sensitive), attribute values, and whether the current template has that part.
2. Check the property is supported for that element. See the properties and engine limits below. For example, background-color works on containers such as section and header, but not on text elements such as field.
3. Simplify. Reduce the rule to one selector and one declaration, confirm it works, then add more.
4. Check the limit message. More than 128 KB, 1,024 rules, 8,192 declarations, 64 selectors in one rule or four nested media blocks makes the whole stylesheet unusable; the editor reports this.

Engine limitsCopy Anchor Link

The PDF engine accepts these without an error but doesn't draw them:

• Rotation (transform: rotate(...)). The picture's Rotation control is disabled while the PDF engine lacks support.
• Dashed and dotted borders. They draw as solid lines.
• Percentages for padding, margin, gaps and font sizes. Percentages work only for width, height, their min- and max- forms, flex-basis, left and right.
• z-index, max-lines, text-indent, vertical-align, object-position and -resume-min-presence-ahead.

Two text limits apply whether or not you use custom styles: right-to-left lines are laid out left to right and then aligned right, and characters outside the basic range, such as most emoji, don't draw.

Copy styles to another resumeCopy Anchor Link

Section types, element names and field names work in any resume. Rules that use an entry's id only match that entry, and template parts only exist in their template.

1. In the source resume, select Copy stylesheet.
2. In the other resume, open Design → Advanced → Custom Styles and paste.
3. Remove or rewrite rules with item[id=...] selectors, and template-part rules for a different template.
4. Check the page and the downloaded PDF.

ReferenceCopy Anchor Link

Target the right part of your resumeCopy Anchor Link

Semantic CSS selectors describe resume content, not a template's internal layout. Element names and attribute names are lowercase and case-sensitive.

Resume structure

Header and entry content

Rich text and lists

Narrow a selector with attributesCopy Anchor Link

Attribute matchers =, ~=, ^= and *= are supported. #projects is shorthand for [id="projects"] when the ID is a plain word (section IDs such as experience are; entry IDs aren't, so use item[id="..."]).

Selectors can be combined with commas, and with the descendant (space), child (>), next-sibling (+) and later-sibling (~) combinators. Supported pseudo-classes: :root, :first-child, :last-child, :only-child, :nth-child(), :nth-of-type(), :is(), :where() and :not(). :nth-of-type counts elements of the same kind, so item:nth-of-type(1) is the first entry.

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

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

section[type="experience"] item:nth-of-type(1) {
  margin-bottom: 12pt;
}

Reuse your Design settingsCopy Anchor Link

Your Design settings are available as read-only --resume-* variables. Define your own variables in :root and reuse the resume's values, so your styles follow when you change a color or size in Design.

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

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

Don't assign a value to a --resume-* variable; create your own, such as --accent, instead.

Use pt for predictable sizes in a PDF. Lengths also accept px, in, mm, cm, em and rem, and % where the engine limits allow it. inherit and initial work as values, and !important is respected.

PropertiesCopy Anchor Link

background-color and borders apply to container elements (such as header, section, item, region), not to text elements. display: none hides an element that's already there; to remove content, hide it in Write instead, so it's also left out of exports.

Backgrounds must be flat colors. Gradients such as linear-gradient(...) aren't supported:

header {
  background-color: #1e293b;
}

Style common detailsCopy Anchor Link

List rows, markers and text:

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

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

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

Space between a skill's level icons (gap works too; row-gap doesn't change this single row):

section[type="skills"] level {
  column-gap: 4pt;
}

Named fields inside entries:

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

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

Control page breaks and page sizeCopy Anchor Link

Start a section on a new page, keep entries whole, or set a custom page size. Review the downloaded PDF after each change.

page {
  size: 210mm 297mm;
}

section[type="projects"] {
  break-before: page;
}

item {
  break-inside: avoid;
}

size takes A4, letter, or a width and height. It applies only to page and can't be inside @media.

@media queries use the PDF page's dimensions, not your browser window. Supported features are width, min-width, max-width, height, min-height, max-height and orientation (portrait or landscape).

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

Template-specific partsCopy Anchor Link

Some templates expose extra details that others don't have. Always guard these rules with resume[template="..."], so they don't apply by accident after a template change.

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

Kakuna, Lapras, Onyx and Porygon have no template-specific parts.

Every template also has template-part[name="item-header-row"]: the row with the title and date in Awards, Certifications, Projects and Publications entries. It doesn't need a template guard.

Not supportedCopy Anchor Link

Classes, pseudo-elements (::before, ::after), CSS Grid, @import, @font-face and other at-rules except @media, url() and any external file, gradients, general box shadows, filters, animations and transitions. Use the Design controls for fonts, the picture and broader layout changes.

Related guidesCopy Anchor Link

• Choosing a template: a different template may get you most of the way without CSS.
• Customizing typography: fonts, sizes and line height from Design.
• Arranging the layout: columns, sidebar and page breaks without CSS.
• Undoing changes and version history: get back to a stylesheet that worked.