# Set Style

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

Available in: Page Flow

Toolbox Category: Style/CSS

Block Type: [Regular](/app-editor/page-flow/block-anatomy.md#regular-block)
{% endhint %}

**`Set Style`** is a [regular block](/app-editor/page-flow/block-anatomy.md#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](/app-editor/page-flow/toolbox-blocks/set-style-in-data-design.md) 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="/files/yvvKzBFYcAjlxFR7gi3i" 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](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types.md) value containing the [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) you want to set.
* *Element*: [Selectable Input](/app-editor/page-flow/block-anatomy.md#selectable-input) to choose the element you want to set the style of.
* *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types.md) 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="/files/Lbc3BUa0UdHIuDq3xKkX" 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](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types.md) value containing the [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) you want to set.
* *Element*: [Value Parameter](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types.md) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types.md) 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](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types.md) 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="/files/VJkqaYPzH0LuEtAnkYz9" 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="/files/KWiECXYAJ5om9vrGZkhz" 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="/files/aOAX2pOJSp3Cbs3tMicr" 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="/files/yPEdkwtgOdw16puBkh0i" alt="" width="563"><figcaption><p>Example of Set Style using a Variable Value block</p></figcaption></figure></div>


---

# 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.zingy.ai/app-editor/page-flow/toolbox-blocks/set-style.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.