> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/css-styles/general-techniques.md).

# 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>