# Configuring CSS styles

There are lot of places where CSS styles can be applied.

CSS styles can be configured with several ways:

### CSS Editor (Old View)

It consists of text area and "More" button. This button when clicked calls a dialog window. 

* Click "Add" link here to add a line for CSS property (rule)
* Enter CSS property name in "Rule Name" field, and value in "Rule Value" field:

<img src="/files/dNuwPQXZTwoUE4Z6o9qr" alt="" class="gitbook-drawing">

{% hint style="warning" %}
Note: you should not type any CSS separators (semicolon) or brackets.
{% endhint %}

Add more rules if needed. Click "Apply" button to get rules applied to element being styled.

After clicking "Apply" button you will see styles (combined as properties set) in text area:

<img src="/files/HOwL70hnrBMNRLNu8zD3" alt="" class="gitbook-drawing">

{% hint style="info" %}
You can copy styles from this text area, but you are not allowed to edit them here directly.
{% endhint %}

CSS styles can be added to element by pasting them into the text area.

1. Copy styles in proper format (e.g. from web inspector in your browser)
2. Click on text area (to make it focused) and paste styles here (press keyboard shortcut)

A dialog window will be opened. It will contain as previously set CSS properties, as just pasted (distributed by separate lines):

<img src="/files/m54Qq1sUil1p0EKJMc0n" alt="" class="gitbook-drawing">

Click "Apply" button to save new styles.

### Combined Fields with Rules (New View)

CSS editor allows to do the same things as an old view one. User can add CSS rules one by one or several at one time as CSS code.

Click "+" button to add rule lines:

<img src="/files/x3DNdYmUOpIoB4MgvnxI" alt="" class="gitbook-drawing">

Enter rule name and rule value into proper fields and save changes by clicking "Save" button:

<img src="/files/zG8R1dEIpkSDq5Q2rXHL" alt="" class="gitbook-drawing">

To edit CSS as stylesheet data, click "edit" button to show a textarea where you can add/remove/copy/paste styles:

<img src="/files/epTs1VV7brR20FI9mZ5c" alt="" class="gitbook-drawing">

{% hint style="warning" %}
In the old view you can not remove or change CSS properties in textarea, only copy or add by pasting. In the new view you can.
{% endhint %}

CSS styles can be added to element by pasting them into the text area.

1. Copy styles in proper format (e.g. from web inspector in your browser).
2. Click on text area and paste styles here.

CSS properties form the textarea will be added as separate rule lines:

<figure><img src="/files/1M7GwksMp9joWljrRlMx" alt=""><figcaption></figcaption></figure>

### Formulas, Functions and Merge Fields in Styles

CSS properties can be dynamically set based on different system and object data using built-in features.

Refer to [Functions section](/references/functions.md), to [Merge Field](/standard-kanban/tools/using-merge-field-picker.md) Picker, and [Formula Editor](/standard-kanban/tools/using-formula-editor.md) articles to know how to work with them.

For example CSS properties that can be configured with formulas and merge fields as shown below.

CSS property can be set to "color" or "background-color" depending on record "IsClosed" field value:

<img src="/files/LpGnvFF6zRwC4tLy4ifA" alt="" class="gitbook-drawing">

And value of this property can be set to different color depending on record "Type" field value:

* \#808000 if it is set to "electrical";
* \#78904B if "mechanical";
* and #4488CC for other values:

<img src="/files/4Zh5Gkg2QjDZis3vAn1N" alt="" class="gitbook-drawing">

So, CSS rule will look like this:

<img src="/files/6kTQC7Uo9ecumoCe9JoO" alt="" class="gitbook-drawing">

And it will mean "If case is closed, card text color will be set to one of 3 colors depending on case type; if case is not closed, this color will be applied as background".


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.