Control property - External CSS

Stay limitless when it comes to styling your controls in your microapp. You can find the External CSS property provided under the Info section for every control, in the studio. With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control.

Let’s have a quick look at how to work with external CSS property for a control.

We get a toggle button of Apply under the External CSS property section, which when toggled on, gives us a section of edit with a code editor.

external css

Click on Open Code Editor and it will open an editor to write your CSS in it. This editor supports all styling attributes and properties.

This code editor can also detect errors in the code syntax and will inform you right below with the error message and line of error.

Writing External CSS

Writing external CSS is very easy and straightforward. To write external CSS for control you just need the class/id of the element and provide the CSS attributes for it in the code editor. You can obtain the classes/ids by doing an inspect on the control element.

insepect

Get the class/id, provide CSS styling to in the code editor. Then click Save . You will see the changes with applied external CSS in the builder view itself.

Control preview without external CSS

Control preview with External CSS