> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/variables-and-styles.md).

# Variables and styles

## 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.

<figure><img src="/files/ZqUtGUGG92Dvs9R2DPWt" alt=""><figcaption><p>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.</p></figcaption></figure>

Each element can be styled individually by opening the [Property Editor](#user-content-fn-1)[^1] and making changes to the settings in the *Appereance* tab:

<figure><img src="/files/1YtICRoHRj7QkXg7k9Pw" alt=""><figcaption><p>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.</p></figcaption></figure>

## 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:

<details>

<summary><mark style="color:blue;">Color variables:</mark> save colors and apply them to elements and styles</summary>

The Color Variables feature in the Gloabl 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.

Article: [Color variables](/help-guides/design/variables-and-styles/color-variables.md)

</details>

<details>

<summary><mark style="color:blue;">Font variables:</mark> save fonts and apply them to elements and styles</summary>

The Font Variables feature in the Global 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.

Article: [Font variables](/help-guides/design/variables-and-styles/font-variables.md)

</details>

<details>

<summary><mark style="color:blue;">Styles:</mark> save and manage style properties that can be applied to elements</summary>

The Styles section in the Global tab 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](/help-guides/design/variables-and-styles/styles.md)

</details>

[^1]: The Property Editor is the floating window that lets you edit the settings of a given element.\
    \
    You display the Property Editor either by double-clicking the element in the design tab or clicking it once in the Element Tree.