5 min read

How to use styles in

Published on
March 1, 2023
How to use styles in is a popular platform for building web applications without the need for coding. With its drag-and-drop interface and intuitive features, even non-coders can create complex web apps in minutes. However, to make your app visually appealing, you need to use styles.

What Are Styles in

Styles are a set of visual properties that define the appearance of your elements in an organized manner. In, you can define styles in the Styles tab, which allows you to change the styling properties of elements using the Property Editor. You can also create conditions on styles, but only for basic states like hover, focus, etc.

Why Use Styles in

Using styles in is crucial for optimizing and organizing your projects, making them easier to maintain in the future. Styles are especially useful when working on large-scale projects with multiple pages and elements. By defining styles for each element, you can make changes to your app's visual appearance quickly and easily.

Another benefit of using styles is that they can help improve page loading speed for users (and for search engines). By reducing the number of CSS stylesheets that need to be loaded, you can significantly decrease the time it takes for your pages to load.

How to Use Styles in

To use styles in, you need to follow these simple steps:

Step 1: Define Your Styles

The first step is to define your styles. You can do this by clicking on the Styles tab and selecting New Style. Give your style a name and select the element type (e.g., text, button, input, etc.). Next, define the styling properties for your element (e.g., font size, color, padding, margin, etc.).

Step 2: Apply Your Styles

Once you've defined your styles, you can apply them to your elements. To do this, select the element you want to style, click on the Styles tab, and select the style you want to apply from the dropdown menu.

Step 3: Use Style Variables

Style variables are a useful tool for setting font or color values that can be used throughout your app, and updating the value at a global level will update all instances that use it. To create a style variable, simply add a $ symbol before the name of your variable (e.g., $primary-color).

Step 4: Create Conditions

You can create conditions on styles to change the appearance of elements based on certain events (e.g., hover, focus, etc.). To create a condition, select the element you want to add the condition to, click on the Styles tab, and select Add Condition. From there, you can define the condition and the styling properties that should be applied when the condition is met.


Styles are an essential tool for optimizing and organizing your projects. By using styles, you can make changes to your app's visual appearance quickly and easily, while also improving page loading speed for users. So, remember to use styles when building in!

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Oops! Something went wrong while submitting the form.

No Code / Low Code Resources

See how the Nymbl team thinks.

No Code / Low Code 101

Get a high level overview of the no code / low code space and why it’s so powerful. Learn what no code / low code is, what it’s good for, and where it’s going next.

See more

Use Cases

Check out our collection of common business use cases for no code and low code tools to get some inspiration for your next project.

See more

Guides and Research

At Nymbl, we study as much as we build. Explore our library of approachable guides and research on the most popular low code and no code tools.

See more