> 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/~/changes/KJh7wUmvooVFeg4izJFB/help-guides/design/styling.md).

# Styling

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

Article: [Color variables](/~/changes/KJh7wUmvooVFeg4izJFB/help-guides/design/styling/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 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.

Article: [Font variables](/~/changes/KJh7wUmvooVFeg4izJFB/help-guides/design/styling/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* 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](/~/changes/KJh7wUmvooVFeg4izJFB/help-guides/design/styling/styles.md)

</details>

## Related topics

<details>

<summary><mark style="color:blue;">App Visual settings:</mark> favicon, colors and console settings</summary>

This section covers the general styling settings of your app:

* Favicon
* Progress bar color
* Data loading spinner color
* Remove Bubble mention in console

Article: [Visual settings](/~/changes/KJh7wUmvooVFeg4izJFB/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/settings-tab/application-settings/visual-settings.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.