# Set Style

{% 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 Style`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to set a [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) on any element on the page or form. 

{% hint style="success" %}
Refer to the [Set Style in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-style-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%2FtYgnopDsd6kmlgyFEwNO%2Fimage.png?alt=media&#x26;token=09e08800-11f7-4956-8b2c-7c67503f2db1" alt="" width="393"><figcaption><p>Set Style (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Set Style block consists of (from left to right):

* *Property*: [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 [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) you want to set.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element you want to set the style of.
* *Data*: [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 value of the property you are setting.

## 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%2F0z3waY2CanjqfIHaAQZz%2Fimage.png?alt=media&#x26;token=3aa8e8a6-3242-4883-96f5-87dd8b29b615" alt="" width="393"><figcaption><p>Set Style (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Set Style block consists of (from left to right):

* *Property*: [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 [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) you want to set.
* *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.
* *Data*: [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 value of the property you are setting.

***

## Usage Examples

The image below shows an example of the Mode 1 version where the [**`background-color`** CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) of a selected element is set using the Color Selection block attached to the *Data* value parameter.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FfE6kqigONciJZvnEgP7x%2Fimage.png?alt=media&#x26;token=a0a483ea-2152-4fce-b6f8-bb4d5ad1e3be" alt="" width="563"><figcaption><p>Example of Set Style Mode 1</p></figcaption></figure></div>

In the next example we see a Mode 1 version where the *Data* value parameter is attached to an Text block specifying the color in [hex triplet format](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet).

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fu30muQgf0n4z418C2cko%2Fimage.png?alt=media&#x26;token=a62d0e6b-6535-44f6-825c-b1453bb645cf" alt="" width="563"><figcaption><p>Example of Set Style 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.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FpWqCtssdSfdYNvXd7Ab1%2Fimage.png?alt=media&#x26;token=35ce5487-7cca-406b-9ff3-bcf8037fdbf2" alt="" width="563"><figcaption><p>Example of Set Content 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 %}

The last example shows a Mode 2 version where the *Element* value parameter is attached to an Element block. Additionally the *Data* value parameter is attached to a Variable Value block.&#x20;

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FVFeGEn2I4xBfKqynDbX4%2Fimage.png?alt=media&#x26;token=1aa54412-a63d-4126-a436-a8ccc738fa2e" alt="" width="563"><figcaption><p>Example of Set Style using a Variable Value block</p></figcaption></figure></div>