Homebrewery: How to Apply Styles to Specific Pages Without Breaking Your Document

So, you’ve been spending hours in The Homebrewery, painstakingly crafting that perfect D&D supplement. You’ve got the lore down. The stat blocks look crisp. But then you hit a wall: you want the intro page to have a sprawling, dark ink-blot background, but you want the rest of the book to stay clean and readable. You try to drop in some CSS, and suddenly, your entire 50-page PDF looks like a chaotic mess of overlapping images and misaligned text.

It happens to the best of us.

Understanding homebrewery how to apply styles to specific pages is basically the "level up" moment for any homebrew creator. The tool, built by Scott Tolksdorf, is essentially a specialized Markdown editor that renders HTML and CSS. Because it uses a continuous flow of "pages," applying a style to one often leaks into the others unless you know exactly how to wall it off.

Why Global CSS Is Your Worst Enemy

Normally, when you drop a <style> tag into your document, the browser treats it as a universal command. If you tell the background to be red, every single page turns red. This is fine if you want a consistent theme, but it’s a nightmare for custom covers or special "handout" pages.

Most users start by trying to use basic selectors like .phb. In the older legacy renderer, this was the standard. However, since the shift toward the V3 Renderer, things have changed. If you’re still using Legacy, you’re fighting an uphill battle with outdated tech. The V3 engine uses standard CSS variables and better containerization, which actually makes page-specific styling much easier if you know the syntax.

The Secret Sauce: Page-Specific Selectors

The trick to mastering homebrewery how to apply styles to specific pages lies in the unique ID or the nth-child selector. Every page in Homebrewery is wrapped in a <div class="page"> element. To target just one, you have to tell the CSS exactly which "child" it’s looking at.

Think of it like an apartment building. If you shout "paint the walls blue" in the lobby, every apartment gets painted. If you say "paint the walls in apartment number four blue," only that one changes.

In CSS terms, it looks like this:
.page:nth-child(5) { background-color: black; }

This would make the fifth page in your document have a black background, leaving pages one through four and six through fifty completely untouched. It’s surgical. It’s clean. And honestly, it’s the only way to maintain your sanity when building a long-form campaign guide.

Dealing with the V3 Renderer Nuances

If you are using the V3 renderer—which you should be—the syntax for background images and spacing is slightly more refined. You might find that even when you target a specific page, certain elements like footers or page numbers still won't behave. This is because Homebrewery uses "CSS Variables" (those weird things starting with --).

Instead of just forcing a background color, you might need to override the variable:
.page:nth-child(1) { --hb-page-background: url('your-image-link.png'); }

This is much more effective than trying to "brute force" the styling with !important tags.

Real World Example: The "Dark Mode" Handout

Let's say you're writing a module where the players find a charred journal. You want page 12 to look burnt and ash-grey, with white text.

1. First, find page 12.
2. Go to your Style Tab (the paintbrush icon).
3. Use the :nth-child(12) selector.
4. Change the background image.
5. Invert the text color using color: #eee;.

You've basically created a localized "Dark Mode" within a "Light Mode" book. It’s a professional touch that separates the amateurs from the people who end up on the front page of r/UnearthedArcana.

Avoiding the "Page Count Shift" Trap

Here is a mistake I see constantly.

You spend three hours perfectly styling page 7. Then, you decide page 2 needs more lore. You add three paragraphs, the text overflows, and Homebrewery automatically creates a new page. Now, your "page 7" is actually page 8.

But your CSS? It’s still pointing at :nth-child(7).

Suddenly, your beautiful custom styling is applied to the wrong page, and page 8 is a mess.

To fix this, some advanced users use a "marker" technique. By placing a specific, invisible HTML element on the page you want to style, you can sometimes use the :has() selector (though browser support in PDF rendering can be finicky) or, more reliably, use custom classes.

Using Custom Classes for Stability

Instead of relying on the order of pages, you can wrap your entire page content in a custom div.
Inside your Markdown, you’d write:
<div class='my-special-page'> ... content ... </div>

Then in your CSS:
.page:has(.my-special-page) { background: parchment; }

This way, no matter how many pages you add before it, the style "sticks" to the content, not the page number. It’s a bit more work up front, but it saves a massive headache during the editing phase.

Image Masking and Overlays

Sometimes the issue isn't the whole page, but just a corner. You’ve probably seen those cool "watercolor" edges on D&D books. Homebrewery handles these with image masks. Applying a mask to a specific page follows the same logic. You target the :nth-child and then apply the mask-image property.

I once saw a creator try to do this by just floating an image in the corner. It looked fine on the screen, but when they hit "Print to PDF," the image jumped three inches to the left. Why? Because they didn't anchor it to the .page container.

Always anchor your custom page styles to the .page class. It ensures that the coordinates are relative to the paper, not the entire browser window.

🔗 Read more: Why Visions of Mana Characters Feel Different Than Every Other RPG Group This Year

Technical Limitations to Keep in Mind

We have to talk about Chrome. Homebrewery is optimized for Chrome. If you’re trying to apply complex CSS in Firefox or Safari, you’re going to have a bad time. The PDF rendering engine used by Homebrewery relies on specific WebKit behaviors.

• Page Breaks: If you use column-break-after, it might mess up your page count for the :nth-child selector.
• Asset Hosting: Your styles will only look good if your images actually load. Use reliable hosts like Imgur or Google Drive (with a direct link generator). If your "specific page style" relies on a dead link, you just have a blank white page.
• Print Settings: Always make sure your print settings are set to "No Margins." If you have margins on, your page-specific backgrounds will have a weird white border around them.

Troubleshooting Style Leaks

If you apply a style to page 3 and it somehow shows up on page 4, check your brackets. Seriously. A single missing } in your Style Tab can cause the rest of the document's CSS to fail or merge.

Another culprit is "Inheritance." Some CSS properties automatically pass down to their children. If you set a font style on the body, everything gets it. If you set it on .page:nth-child(1), only the first page gets it—unless you have another style rule later that overrides it. CSS reads from top to bottom. The last rule always wins.

Actionable Steps for Your Next Brew

If you want to start applying specific styles right now, follow this workflow:

• Switch to the V3 Renderer: If you are starting a new project, don't use Legacy. Go to the document settings and ensure V3 is active.
• Identify Your Page Number: Count your pages carefully, keeping in mind that the cover is page 1.
• Open the Style Tab: Click the paintbrush icon in the top right.
• Use the Child Selector: Start with .page:nth-child(X) { ... } where X is your page.
• Test with Background Color: Before you mess with complex images, just try changing the background to background: red;. If the page turns red, you know your selector is working.
• Lock it Down with a Custom Class: If your document is still growing, wrap your page content in a <div class='unique-name'> and style based on that class to prevent the "shifting page" nightmare.
• Check the PDF Preview: What you see in the editor isn't always what the PDF engine spits out. Frequently check the print preview (Ctrl+P) to ensure your page-specific styles are rendering correctly on the actual "paper."

Customizing your homebrew shouldn't feel like fighting a beholder. By mastering the way CSS interacts with individual page containers, you can create professional-grade supplements that look like they came straight from a major publisher. It just takes a little bit of structural discipline and a willingness to poke around in the Style Tab.