# Set CSS

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Style/CSS

Block Type: [Regular](https://docs.zingy.ai/app-editor/block-anatomy#regular-block)
{% endhint %}

**`Set CSS`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to add and/or remove [CSS classes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) from any element on the page or form. 

{% hint style="success" %}
Refer to the [Set CSS in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-css-in-data-design) block for dynamically generated content.
{% endhint %}

The block comes in two modes which are discussed below.

## Mode 1 <a href="#mode-1" id="mode-1"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FpEdUTP69ZnCOlOoRFsc3%2Fimage.png?alt=media&#x26;token=0b8a21ae-63b5-4f6f-8637-b368444347eb" alt="" width="249"><figcaption><p>Set CSS (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Set CSS block consists of (from top to bottom):

* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element you want to add/remove the CSS classes for.
* *Add Classes:* [Input](https://docs.zingy.ai/app-editor/block-anatomy#input) configuration setting to specify classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.
* *Remove Classes:* [Input](https://docs.zingy.ai/app-editor/block-anatomy#input) configuration setting to specify classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.

## Mode 2 <a href="#mode-2" id="mode-2"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FHtGfhnpkIEN5hPcOM6jb%2Fimage.png?alt=media&#x26;token=f72e7803-51f5-4337-a4e5-f61f1ffa6368" alt="" width="249"><figcaption><p>Set CSS (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Set CSS block consists of (from top to bottom):

* *Element*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts either a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized.
* *Add Classes*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value containing the classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.
* *Remove Classes*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value containing the classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.

***

## Usage Examples

The image below shows an example of the Mode 1 version where the CSS class `bg-info` is being added and the class `bg-dark` is being removed.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FcIsuuxOxT40YGkX7i0if%2Fimage.png?alt=media&#x26;token=15a72966-d800-489b-bdd9-85cc1938f73e" alt="" width="492"><figcaption><p>Example of Set CSS Mode 1</p></figcaption></figure></div>

In the next example we see a Mode 2 version where the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same element. The *Add Classes* and Remove Classes value parameters are attached to Variable Value blocks.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FnimETEN1MDKrqoKesqxC%2Fimage.png?alt=media&#x26;token=dd1132e0-5941-40d4-a4e9-e2dd5709e9bd" alt="" width="563"><figcaption><p>Example of Set CSS Mode 2</p></figcaption></figure></div>

{% hint style="success" %}
NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:

* [Wikipedia article on CSS](https://en.wikipedia.org/wiki/CSS#Selector)
* [Mozilla Developer Network article on CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
  {% endhint %}