# CSS

## 🌈 CSS Customization

CSS customization allows you to fully unleash the full potential of the ngSurvey form engine and customize every single piece of your forms using [CSS classes](https://docs.ngsurvey.com/form-management/style-branding/style-editor/css/css-classes). If its the first time that you hear about CSS you may follow this [tutorial](https://www.htmldog.com/guides/css/beginner/) to learn more about CSS and how it works.

##  ➕ Adding CSS

you may add your own CSS class definitions using the CSS entry screen. 

All the code that you enter and save in the CSS entry box will be injected by ngSurvey at runtime to style your survey accordingly to your CSS definitions.

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcm_S6ONhbWIJfvXyg%2F-MBctjFytCkewBehvnsz%2Fimage.png?alt=media\&token=749cada2-0cbc-4a96-b476-db5574ff508e)

{% hint style="info" %}
CSS definitions have the highest priority and will override any other property class previously defined by the style. 
{% endhint %}

The available class dropdown displays the CSS classes that are not used yet in the customized CSS code. You may check the [CSS classes list](https://docs.ngsurvey.com/form-management/style-branding/style-editor/css/css-classes) for an overview of the different classes that you can use to define your styles. 

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcm_S6ONhbWIJfvXyg%2F-MBcz1e0IvCDOs_xNGbA%2Fimage.png?alt=media\&token=ff29252e-9393-47d5-aa39-97391a157c50)

## 📐Custom CSS classes

You may also use your own CSS class definition that will be applied to your question or answers. If you created class called myclass.

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcm_S6ONhbWIJfvXyg%2F-MBd-CRYhU216TBe-ffh%2Fimage.png?alt=media\&token=24be4ec0-4938-4529-b107-45fa3180d011)

You could set this class on any of the question or answers of your choices by setting the CSS class property on your [question](https://docs.ngsurvey.com/form-management/form-designer/questions/question-properties) or [answer](https://docs.ngsurvey.com/form-management/form-designer/answers/answer-properties) properties page.

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcm_S6ONhbWIJfvXyg%2F-MBd-fGpB0C8TQcJNNts%2Fimage.png?alt=media\&token=5210cb05-307d-4942-8c40-ef16a83d41b1)