Add custom CSS to a quiz
On the Pro plan, every quiz has its own Custom CSS field so you can go beyond the logo and primary color options and control spacing, typography, and styling in detail — per quiz, not account-wide.
- 1
Open the quiz in the builder and go to its Settings tab.
- 2
Expand the "Advanced" section and find "Custom CSS". (This is a Pro feature — free accounts see an upgrade prompt here.)
- 3
Write CSS in the code editor. Target the .fluotest-quiz root class and the data-fluotest-el attributes on key elements (question cards, buttons, progress bar) — see the Custom CSS docs for the full reference and example snippets.
- 4
Click "Preview" to check the last saved version of the quiz in an embedded frame.
- 5
Save the quiz. Your CSS is sanitized automatically — HTML tags, @import, and external url() references are stripped — and takes effect immediately on the public page.
For the full list of selectors and copy-paste examples, see the Custom CSS docs.
Was this helpful?