Styles

This section covers styles, which is Bubble's tool for managing centralized stylesheets that can be applied to elements across your app

Bubble lets you set up overarching styles for elements within your app to streamline the design process and promote consistency. By modifying a single style, you can effortlessly restyle all related elements, making it easy to set up and manage a cohesive look and feel in your app.

Each style is connected to a specific element type and includes the following information (that may vary depending on the element type):

• Background color or image

• Border

• Shadow

• Font

• Transitions

Apart from making the design process more efficient, Styles also improves your app's performance by storing styling settings in one central place as opposed to saving it on each separate element.

Styles can be combined with and to set up a design system that's highly efficient and flexible.

Defining styles

The Styles tab is where you edit the different styles that your app has. Editing styles is very similar to editing elements, you use the property editor to change the styling properties.

You can define as many styles as you want. Styles are applied to one type of element, for instance Buttons, but you can have more than one style for Button. Try to name them in a way is easy to read, as you'll have to pick the style that you need for each button. You can also specify which style should be used by default when you insert a new element in this tab.

You can create a from the Style tab by clicking on 'New Style', or from an element itself. When you do so from an element, the current properties of the element will be used as a base for the newly created style. This is particularly useful when you find yourself using the same design for a few elements, but haven't thought about creating a style yet. Please note that when creating your own Styles, specialized labels such as H1 for headers cannot be used.

Applying & removing styles

Conditions on styles

You can build some conditions on styles, but only for basic states, that is to say conditions that are about built-in, simple interactions with the element (hovered, focused, etc.) For instance, conditions using data, or properties on the user, will not qualify as basic.

Applying and detaching styles

When you apply a style to an element, its current properties that are included in the style will be deleted. On the other hand, when you detach a style from an element, the original properties of the style will be copied to the element. So effectively, when you detach a style from a button, the button's appearance won't change at first, so that you can modify the appearance. You can always undo such changes.

Detaching a style does not change or deleted the style, it only detaches it from that specific element.

To detach a style, click the Detach style link underneath the Styles dropdown in the .

Conflicts between conditions

You can overwrite a condition that is included in a style at the element level; between a style's condition and an element's condition, if the same property is modified, the condition at the element level will win.

Using Style Variables

Style variables are used to store specific colors and fonts that can then be applied to elements and styles throughout your app. This ensures that your use of fonts and colors remains consistent and is easy to switch out later if needed: for example, replacing a color variable will update all styles that use this variable instantly.

You can read more about color variables and font variables in our dedicated articles.