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

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.

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:

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.

## 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. Article: [Color variables](https://manual.bubble.io/help-guides/design/styling/color-variables)
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. Article: [Font variables](https://manual.bubble.io/help-guides/design/styling/font-variables)
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](https://manual.bubble.io/help-guides/design/styling/styles)
## Related topics
App Visual settings: favicon, colors and console settings 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/help-guides/design/broken-reference)
[^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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://manual.bubble.io/help-guides/design/styling.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.