This section covers the different styling properties that can be applied to elements, such as colors, borders, shadows and fonts.
What is styling
Each element that you add to your page has a default styling applied to it. In short, styling refers to what your elements look like, and this is done by changing styling settings:
Background color or image
Border
Shadow
Font
Transitions
The settings above open up for a wide range of different looks where to elements that perform exactly the same task can look very different.
Each element can be styled individually by opening the and making changes to the settings in the Appereance tab:
Managing styles
But Bubble also has several different tools for efficiently managing and updating the styles of your app's elements. They are split into three different sections:
Color variables: save colors and apply them to elements and styles
The Color Variables feature in the Styles tab enables you to establish a palette of colors that you can apply throughout your app. Making changes in a Color variable automatically applies those changes to every style and element connected to that variable.
Font variables: save fonts and apply them to elements and styles
The Font Variables feature in the Styles tab enables you to establish a collection of fonts that you can apply throughout your app. Making changes in a Font variable automatically applies those changes to every style and element connected to that variable.
Styles: save and manage style properties that can be applied to elements
The Styles tab in Bubble provides you with a centralized place to define and manage all of your app's style settings.
Styles create a consistent, visually appealing design for your app while making it easier to update that design in the future. Making changes to a style automatically applies those changes to every element connected to it.
Article: Styles
Related topics
App Visual settings: favicon, colors and console settings
This section covers the general styling settings of your app:
These two input element serve the same purpose, but their styles are different. The bottom one seems to hover above the page – an effect often used to draw attention to a particular element.
You can tweak the style settings of each individual element, but Bubble also offers tools to set up stylesheets that you can manage from one place.
