How to Add Custom CSS to Your Quizzes

Introduction

Custom CSS allows you to fully personalize your quizzes so they match your brand’s design and deliver a more polished user experience. With Quizell, you can apply custom styles globally and target specific elements using custom classes — all without leaving the quiz editor.

This guide walks you through how to enable CSS styling, add your code, assign custom classes, and publish your changes.

Step-by-Step Setup Guide

Step 1: Access the CSS Editor

From your Quizell dashboard, go to Quizzes.
Select the quiz you want to customize.

In the left-side menu, click Code (</>).

Click Enable Styling to activate the CSS editor.

Step 2: Add Your CSS Code

Once styling is enabled, paste or write your custom CSS inside the editor.
Use standard CSS syntax to style elements using class selectors.

💡 Tip: At this stage, your code is still in Draft mode and not yet visible to users.

Step 3: Assign Custom Classes to Quiz Elements

To apply your CSS to specific elements:

Go back to the Quiz Editor.
Click the element you want to style (text, button, input, image, etc.).
In the left-side settings panel, locate the Custom Class field.
Enter the class name used in your CSS (without the .).

Save your changes.

💡 Tip: You can reuse the same class on multiple elements if needed

Step 4: Publish and Save Your CSS

Return to the Code → CSS Styling panel.
Toggle Publish Live to make your styles active.
Click Save in the top-right corner.

Step 5: Test Your Changes

Click Preview to test your quiz.
Verify that your styles apply correctly across pages and devices.
Adjust your CSS if needed and re-save.

🎉 That’s it!

Your custom CSS is now live and applied to your quiz.

By combining CSS styling with custom classes, you can achieve precise control over your quiz’s look and feel — from buttons and text to layouts and spacing.

What’s Next?

Keep customizing your quiz with these guides:

Updated on: 19/12/2025

Was this article helpful?

Thank you!