# Styles

The **Styles** option allows you to adjust and customize the appearance of elements on your website, including text, images, buttons, forms, and various types of widgets. Through **Styles**, you can change properties such as colors, fonts, borders, spacing, and other effects to ensure they align with the overall design of your landing page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FQICbKeOk9zqzWl3z8juv%2Fimage.png?alt=media&#x26;token=9440949f-5eee-462f-b062-5b67eaa7f6e2" alt=""><figcaption></figcaption></figure>

Here is a detailed guide on how to use the **Styles** option:

* **Background:** The Background Color option allows you to set the background color for the selected element on the page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F2xY6esobez5seKhmMOYz%2Fimage.png?alt=media&#x26;token=a146c326-ed6c-4455-843f-04d1fbe9753b" alt=""><figcaption></figcaption></figure>

* **Overflow**: When the content inside a section or box exceeds its size, you can adjust how the section or box handles the overflow content by using Overflow.
  * **Default**: In some browsers or certain situations, `visible` is considered the default value. This means that if you do not specify an overflow content, the browser will treat it as `visible`.
  * **Hidden**: Content that exceeds the size of the element will be cut off and not displayed outside the element's boundaries.
  * **Visible**: Content that exceeds the size of the element will be fully displayed, even if it overflows outside the boundaries of that element. This is the default value in many cases.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Ff1hn0KIQAikSTkN9lDOc%2Fimage.png?alt=media&#x26;token=e5533c85-63fc-4e59-a759-37f11b871eeb" alt=""><figcaption></figcaption></figure>

* **Box Shadow**: The Box Shadow option allows you to create shadow effects for elements, making them stand out and appear more three-dimensional. You can customize the type of shadow, its position, color, opacity, and size.&#x20;

  <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FNjQaAmxVS1qOC5pxt0cg%2Fimage.png?alt=media&#x26;token=fdc1cb64-06c9-49a3-b2bc-bda723528483" alt=""><figcaption></figcaption></figure>

  * **Type**:
    * **Box**: This is the standard shadow type, creating a shadow around the entire element.
    * **Realistic**: This shadow type creates a more realistic shadow effect, with varying opacity and thickness.
  * **Position**:
    * **Outside**: The shadow is positioned outside the element, creating the illusion that the element is lifted off the background.
    * **Inside**: The shadow is positioned inside the element, giving the impression that the element is recessed or sunk in.
  * **Color**: You can choose the color of the shadow using a color picker. The color of the shadow can significantly affect the perception of depth.
    * **X**: Determines the degree of the shadow's offset to the left or right of the element.
    * **Y**: Determines the degree of the shadow's offset above or below the element.
    * **Blur**: Adjusts the blur of the shadow. A larger value will make the shadow softer and more diffused.
    * **Spread**: Adjusts the size of the shadow. A positive value will make the shadow spread wider, while a negative value will make the shadow narrower.