# Styles

{% tabs %}
{% tab title="Experience level" %}
This core reference entry is suited for <mark style="color:green;">**beginner-level builders**</mark><mark style="color:green;">**.**</mark>&#x20;

[Learn more about experience levels.](#user-content-fn-1)[^1]
{% endtab %}

{% tab title="In-depth articles (3)" %}
To learn about this topic more in-depth, we recommend reading the suggested articles below:

#### Styling

In the article series below, we cover styles, font variables, color variables and how to use custom fonts. This covers the technical side of styling in Bubble.

* Article series: [Styling](https://manual.bubble.io/~/changes/1101/help-guides/design/styling)

***

#### Design and UX (theory and inspiration)

If you are new to design, you may also be interested in checking out our beginner's guide to design where we link to a lot of different resources where you can learn, find inspiration and use resources such as templates, icon packs and style sets:

* Article series: [Design and UX](https://manual.bubble.io/~/changes/1101/help-guides/getting-started/building-your-first-app/design-and-ux)

***

#### Elements

If you are unfamiliar with what elements are and how to place them on the page and assign them responsive properties, the article series below gives an extensive introduction to how you populate your page with sleek and useful elements and make them behave as you want:

* Article series: [Elements](https://manual.bubble.io/~/changes/1101/help-guides/design/elements)
  {% endtab %}

{% tab title="Videos (1)" %}

* Getting started with Bubble: [Styles](https://www.youtube.com/watch?v=dVGsT1v24AM)
  {% endtab %}
  {% endtabs %}

## Element type&#x20;

Select a type from the dropdown, such as Alert, Group, or Repeating Group, to return the existing styles for that element[^2].&#x20;

## Search by name

Type the name of an existing style, such as "Standard Alert," to find and edit that style.

## Add style

Add a custom style to your application. Choose a name and element[^2] type, such as "Custom Alert" for "Alerts." Once you define this style's properties, you can apply this style throughout your app in that element's property editor.

## Find all elements using this style&#x20;

Access a shortcut to the App Search Tool, which will return a list of any elements[^2] currently using this style. Clicking on a result in the App Search Tool will take you to the location of that styled element in your application.&#x20;

## Make this style the default&#x20;

Any new elements[^2] of this type will automatically be created with this style, rather than the predefined styles that come with your application.

## Remove this style as the default

Any new elements of this type will no longer be created with this style. Unless you set another default for this element type, new elements will not have a style when created.&#x20;

[^1]: In the Bubble docs, experience levels are categorized into beginner, intermediate, and advanced.

    To assist with learning, especially for more complex topics, we'll recommend prerequisite reading where it could be beneficial.&#x20;

[^2]: *Elements* are the building blocks that you drop or draw on the page, such as text, buttons, dropdowns, images and icons.

    Article series: [Elements](https://manual.bubble.io/~/changes/1101/help-guides/design/elements)