How to Add Custom CSS to Your Quizzes

Introduction

Custom CSS allows you to fully personalize your quizzes so they match your brand’s style and deliver a more engaging user experience. With Quizell, adding and managing custom CSS is simple and flexible.

This guide walks you through the process step by step.

Step-by-Step Setup Guide

Step 1: Access the CSS Editor

1. From your Quizell dashboard, go to the Quizzes section.
2. Select the quiz you want to edit.

3. In the left-side menu, click Config.

4. Select Styling (CSS) from the available options.

5. Click the Enable Styling button to start.

Step 2: Add and Publish Your CSS Code

1. Write your custom CSS in the dedicated editor box.

2. When ready, click the Save button in the bottom-right corner to apply your code.

Step 3: Add Custom Classes to Elements

1. Select the element in your quiz that you want to customize.
2. In the left-side menu, enter your new class name in the Custom Class field.
3. Click Save to apply changes.

Step 4: Publish Your Code

1. Return to the CSS editor under Configuration.
2. Switch from Draft to Live in the top-right corner.
3. Click Save Changes to finalize.

What’s Next?

Keep customizing your quiz with these guides:

• How to Add Custom Javascript to Your Quiz
• How to Remove the Quizell Watermark
• How to Customize Your Loader
• How to Personalize Quiz Content Using User Data

Updated on: 02/10/2025