# 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="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2Fh9JLq3DuB9zeRmeYLgy6%2Finput-element-styles%402x.png?alt=media&#x26;token=0b519836-cb26-446d-b4c2-fb6a778c4c69" 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="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FGzyGWX5rO8MPccvLYlAj%2Fproperty-editor-styling%402x.png?alt=media&#x26;token=e8721b8f-6c5c-40b5-bc3c-7e40a9e5af5a" 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](https://manual.bubble.io/~/changes/1101/help-guides/design/styling/color-variables)

</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](https://manual.bubble.io/~/changes/1101/help-guides/design/styling/font-variables)

</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](https://manual.bubble.io/~/changes/1101/help-guides/design/styling/styles)

</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](https://manual.bubble.io/~/changes/1101/help-guides/design/broken-reference)

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