# General techniques

## Conditional formatting

You can use the expression below to achieve conditional formatting. It is very similar to conditional expression, or ternary operator.

<mark style="color:green;">`${`</mark>`condition && exprIfTrue || exprIfFlase`<mark style="color:green;">`}`</mark>

The `${}` notation is an [accessor](/app-builder/app-construction/accessors.md) that allows you to access data in your code. Inside the `${}`, the conditional operator manages the conditional operation.

For example, if you want to set a font color to red if a certain condition is true, and black if it is false, you can use the expression like this:

<mark style="color:green;">`${`</mark>` ``isConditionTrue && "Red" || "Black"`<mark style="color:green;">`}`</mark>

In this example, if the variable `isConditionTrue` is true, the expression will evaluate to "Red". If it is false, it will evaluate to "Black".

## Basic Calculating in CSS styles

1. Using `calc()` :\
   `calc()` is a built-in CSS function that allows you to perform simple arithmetic calculations on CSS property values. It works with various units like pixels, percentages, ems, rems, and more.<br>

   Here's an example of how you can use `calc()` to calculate the width of an element as 100 pixel plus 20% of its parent element's width:

   ```css
   calc(100px + 20%);
   ```
2. Using [accessor](/app-builder/app-construction/accessors.md) :

   If you need to perform more complex calculations that are not possible with `calc()`, you can use JavaScript expressions inside CSS. To do this, you can use the `${}` syntax in a template literal.

   Here's an example of how you can use a JavaScript expression to set the element size&#x20;

   ```css
   ${960-2*30}px;
   ```

   This will evaluate the JavaScript expression `960-2*30` to `900`, and then append the "px" unit to the end, resulting in size of 900 pixels.\
   \
   Further more, you can conbine other data with it together. You may add custom variables in Data and use them here.

   ```css
   ${#page.custom_width-2*#page.custom_margin}px;
   ```

   This will evaluate  `#page.custom_width-2*#page.custom_margin`, and then append the "px" unit to the end. By using custom variables like this, you can easily change the CSS properties of a set of elements together by modifying the values of your data.

## Interactive styling example

Here is a example to use the techniques above to highlight number of interest.

1. Create data node

   &#x20; ![](/files/vMxxXTLXeK52L3Pzkbu2)
2. Create a list element and drag a text element inside, set text to ${$item.n}
3. Create a page variable called number in Data Store
4. Create a input element to set page variable
   1. Set Config -> Property -> Input type to 'number'
   2. Add interactions, attention: Set Action Parameters as the image do.

      <figure><img src="/files/Lk8UTuMlxBtQZasOhCnQ" alt=""><figcaption></figcaption></figure>
5. Set text element styles parameters
   1. set width and height to 64px
   2. set background color to `${$item.n==#page.number&&'red'||'green'}`
6. Click 'Preview' to see the final result. Enter any number between 1 to 10 in the input to activate highlight number.<br>

   <figure><img src="/files/6ru38ewKeCcsTNHZrT5z" alt=""><figcaption></figcaption></figure>


---

# 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.acho.io/app-builder/app-construction/elements/css-styles/general-techniques.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.