> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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**

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1v8xgmy.png =1000x657)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_ufjbaa.png =1000x657)

4. Click **Enable Styling** to activate the CSS editor.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_8al7n1.png =1000x657)

### **Step 2: Add Your CSS Code**

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_c55g34.png =1000x657)

💡 **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:

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1b2lxx7.png =1000x657)

5. Save your changes.

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

### **Step 4: Publish and Save Your CSS**

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_m4ovol.png =1000x657)

### **Step 5: Test Your Changes**

1. Click **Preview** to test your quiz.
2. Verify that your styles apply correctly across pages and devices.
3. 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:

* [How to Add Custom Javascript to Your Quiz](https://help.quizell.com/en/article/how-to-add-custom-javascript-to-your-quiz-1wb6nxo/)
* [How to Remove the Quizell Watermark](https://help.quizell.com/en/article/how-to-remove-the-quizell-logo-watermark-from-your-quiz-14hj8by/)
* [How to Customize Your Loader](https://help.quizell.com/en/article/how-to-customize-your-loader-10jfate/)
* [How to Personalize Quiz Content Using User Data](https://help.quizell.com/en/article/how-to-personalize-quiz-content-using-user-data-in-quizell-15lev1j/)