> 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.
`${``condition && exprIfTrue || exprIfFlase``}`
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:
`${`` ``isConditionTrue && "Red" || "Black"``}`
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.
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
```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
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.
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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.acho.io/app-builder/app-construction/elements/css-styles/general-techniques.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.