Reactive-Resume/docs/guides/using-custom-css.mdx

---
title: "Using Custom CSS"
description: "Learn how to use the Custom CSS panel in the resume builder, which selectors to target, and copy‑paste examples for common tweaks."
---

## What the Custom CSS section does

The **Custom CSS** panel lets you write your own CSS rules to change how your resume looks in the live preview (and exports).

- **Live updates**: your changes are applied immediately as you type.
- **Auto-save**: there is no “Save” button—your CSS is saved automatically when it changes.
- **Scoped styling (mostly)**: to avoid affecting the rest of the app, your CSS is _usually_ scoped to the resume preview.

<Frame caption="Screenshot of the Custom CSS section in the right sidebar">
  <img
    src="/images/guides/using-custom-css/screenshot-1.webp"
    alt="Screenshot of the Custom CSS section in the right sidebar"
  />
</Frame>

## Where to find it

In the resume builder, open the **right sidebar** and select **Custom CSS** (the `CSS` section).

## Enable / Disable

- Turn on the **Enable** switch to apply your CSS.
- Turning it off keeps your CSS saved, but stops applying it.

## How scoping works (important)

Your CSS is injected into the preview and most **top-level selectors** are automatically prefixed with:

- `.resume-preview-container`

That means:

- Writing `.page { ... }` effectively becomes `.resume-preview-container .page { ... }`
- Writing `h2 { ... }` becomes `.resume-preview-container h2 { ... }`
- Writing `body { ... }` becomes `.resume-preview-container body { ... }` (which usually matches nothing, because `body` is not inside the preview container)

### Scoping limitation: `@media` / `@supports` blocks

Rules that start with **at-rules** (like `@media print { ... }`) are **not automatically scoped**. If you want to keep those rules limited to the resume preview, you should **manually** prefix selectors inside at-rules with `.resume-preview-container`.

Example:

```css
/* Normal rules: rely on auto-scoping */
.page a {
  text-decoration: none;
}

/* At-rules: manually scope selectors */
@media print {
  .resume-preview-container .page a {
    text-decoration: none;
  }
}
```

### Formatting tip (to avoid scoping edge-cases)

Keep each rule's selector on **one line**, for example:

```css
.page-section-experience .section-item-title {
  font-weight: 700;
}
```

Avoid splitting a selector across multiple lines unless you've confirmed it behaves as expected.

## Finding the right selectors

### Use autocomplete in the editor

In the Custom CSS editor, type a `.` (dot). You'll get suggestions for commonly-used class selectors, including:

- **Page-level**: `.page`, `.page-content`, `.page-header`, `.page-basics`, `.page-main`, `.page-sidebar`, `.page-picture`
- **Section-level**: `.page-section`, `.section-content`
- **Section types**: `.page-section-experience`, `.page-section-education`, `.page-section-projects`, etc.
- **Generic item building blocks**: `.section-item`, `.section-item-header`, `.section-item-title`, `.section-item-description`, `.section-item-metadata`, `.section-item-website`, etc.
- **Per-section item selectors**: `.experience-item`, `.skills-item`, `.profiles-item`, etc.
- **Template wrapper**: `.template-azurill`, `.template-onyx`, `.template-gengar`, etc.

### Stable “starter selectors”

If you're not sure where to start, these are usually safe:

- `.page` (the resume page container)
- `.page-section` (each resume section)
- `.section-item` (each item inside a section)
- `.page-picture` (profile picture container)

### Target a specific template (optional)

To apply styles only on one template, prefix with the template wrapper:

```css
.template-azurill .page-header {
  gap: 12pt;
}
```

### Target a specific page (optional)

Each page has a class like `.page-0`, `.page-1`, etc.

```css
.page-0 .page-header {
  margin-bottom: 6pt;
}
```

### Target a custom section (optional)

Custom sections include a dynamic class: `.page-section-<sectionId>`.

```css
.page-section-custom {
  border-top: 1pt solid color-mix(in srgb, var(--page-text-color) 15%, transparent);
  padding-top: 6pt;
}
```

If you need the exact `<sectionId>`, use your browser devtools on the resume preview to inspect the section element.

## Useful built-in CSS variables (you can override them)

The preview sets a number of CSS variables you can reuse or override:

- `--page-width`, `--page-height`
- `--page-sidebar-width`
- `--page-text-color`, `--page-primary-color`, `--page-background-color`
- `--page-body-font-family`, `--page-body-font-size`, `--page-body-line-height`, `--page-body-font-weight`, `--page-body-font-weight-bold`
- `--page-heading-font-family`, `--page-heading-font-size`, `--page-heading-line-height`, `--page-heading-font-weight`, `--page-heading-font-weight-bold`
- `--page-margin-x`, `--page-margin-y`
- `--page-gap-x`, `--page-gap-y`

Example (tighten spacing without changing your layout settings):

```css
.page {
  --page-margin-x: 10pt;
  --page-margin-y: 10pt;
  --page-gap-y: 6pt;
}
```

## Common examples (copy/paste)

### 1) Make section headings bolder and more compact

```css
.page-section > h6 {
  margin-bottom: 2pt;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
```

### 2) Add subtle dividers between sections

```css
.page-section {
  padding-bottom: 8pt;
  border-bottom: 1pt solid color-mix(in srgb, var(--page-text-color) 12%, transparent);
}

.page-section:last-child {
  border-bottom: none;
}
```

### 3) Reduce the size of metadata (dates/locations)

```css
.section-item-metadata {
  font-size: calc(var(--page-body-font-size) * 0.9pt);
  opacity: 0.75;
}
```

### 4) Improve readability of rich-text descriptions (bullets, spacing)

```css
.section-item-description {
  opacity: 0.95;
}

.section-item-description ul {
  margin-left: 12pt;
  padding-left: 0;
}

.section-item-description li {
  margin: 2pt 0;
}
```

### 5) Style links like a “chip” (useful for project links)

```css
.section-item-website a {
  display: inline-block;
  padding: 3pt 9pt;
  border-radius: 999pt;
  border: 2pt solid color-mix(in srgb, var(--page-primary-color) 45%, transparent);
  text-decoration: none;
}
```

### 6) Hide the profile picture (CSS-only)

```css
.page-picture {
  display: none;
}
```

### 7) Make the header more compact

```css
.page-header {
  gap: 6pt;
  padding-bottom: 6pt;
}

.basics-headline {
  opacity: 0.8;
}
```

### 8) Make skills look denser (better use of space)

```css
.skills-item-name {
  font-weight: 700;
}

.skills-item-proficiency {
  margin-top: 1pt;
}

.skills-item-keywords {
  display: block;
  opacity: 0.85;
}
```

### 9) Highlight a specific section (example: Profiles)

```css
.page-section-profiles {
  background: color-mix(in srgb, var(--page-primary-color) 10%, transparent);
  border-radius: 8pt;
  padding: 8pt 12pt;
}
```

## Troubleshooting

### My CSS doesn't do anything

- Make sure **Enable** is turned on.
- Prefer targeting `.page`, `.page-section`, and `.section-item` instead of `body`.
- Use your browser devtools to **inspect** the preview and confirm the element/class names.

### My `@media` rules affect the whole app / don't apply

At-rules aren't auto-scoped. Prefix selectors inside them with `.resume-preview-container` as shown above.