---
title: "How to style survey using CSS and HTML."
canonical: "https://support.appfire.com/space/SUPPORT/2892695027/How%20to%20style%20survey%20using%20CSS%20and%20HTML."
format: markdown
---
# 📋 Survey Styling Documentation (HTML & CSS)

## 🎯 Overview

This document explains how to create and design Surveys styled using HTML for structure and CSS for appearance. The goal was to create a clean, readable, and user-friendly survey interface.

---

## 🧱 Sample example


This is how email looks like after applying following styling : 

![image-20260217-153152.png](media://43d6aa3d-3f25-467f-8d59-879db4df5eee)



## 🧱 How to use HTML


Here is our example of the HTML code : 

```
<h3>Dear $$userName$$,
We have completed work on the $$issueKey$$ request. We would appreciate if you rate our services. </h3>
<br>
<div style="border: 3px solid black; padding: 15px; width: fit-content; font-size: 18px; font-family: Arial, sans-serif;">
$$ratingSelector$$
</div>

<br>
<h3 style="color: blue;">
Here you can find some information about the ticket :
<br></h3>

<h3 style="color: black;">
<div style="border: 2px solid black; padding: 15px; width: fit-content; font-size: 18px; font-family: Arial, sans-serif;">
<b>Summary</b> : $$Summary$$ <br>
Assignee : $$Assignee$$<br>
Issue Type : $$issuetype$$<br>
Project :  $$project$$<br>
Created date : $$created$$<br>
Updated : $$updated$$<br>
Current status : $$status$$<br>
Summary : $$summary$$<br>
Last comment : $$lastcomment$$<br>
</div>
</h3>

<br>
<i>Kind Regards,
Appfire</i>
<br>
```


To create following styling you have to : 

- Click space settings.
- Go under apps and click “Project Surveys“.
- In the email tab you can copy above code.
- You can also use following place holders from our documentation :

[https://appfire.atlassian.net/wiki/spaces/SRV/pages/16843059](https://appfire.atlassian.net/wiki/spaces/SRV/pages/16843059) 

To create border around stars you have to wrap $$ratingSelector$$ with the following code : 

```
<div style="border: 3px solid black; padding: 15px; width: fit-content; font-size: 18px; font-family: Arial, sans-serif;">
$$ratingSelector$$
</div>
```


![image-20260217-153706.png](media://e0cd3d98-9cd1-4f17-a71f-352452a38c05)



---

## 🎨 Styling Approach (CSS)

CSS is used to improve visual appearance and usability by:

- Following styling has been added using style tags inside a body

```
<h3 style="color: black;">
<div style="border: 2px solid black; padding: 15px; width: fit-content; font-size: 18px; font-family: Arial, sans-serif;">
<b>Summary</b> : $$Summary$$ <br>
Assignee : $$Assignee$$<br>
Issue Type : $$issuetype$$<br>
Project :  $$project$$<br>
Created date : $$created$$<br>
Updated : $$updated$$<br>
Current status : $$status$$<br>
Summary : $$summary$$<br>
Last comment : $$lastcomment$$<br>
</div>
</h3>
```

- You can adjust the padding size or color or border size to your needs.
- <br> will break the line and show text in the next line
- <h3> is a header that will make text bigger.



---

## ✅ Final Result

- After applying above code you can change it to your needs
- It is a good way to style your survey so it’s unique
- You can always go back to your settings and adjust / edit it.