This article will walk you through common Foxify Styles options that you can find in most elements.
## Typography
In this dropdown, you can edit and customize the text-related settings of the element.
* Choose your preferable font from a variety of options:
* Adjust an element's font weight, color, size, line height, and text alignment with ease.
* Click **More settings** to set the text's letter spacing, transformation (uppercase, Title case, lowercase), style (regular/*italic*) and decoration.
## Layout
Quickly fine-tune your content layout by selecting the option **Enable auto layout**.
Use the **Wrap children** option to wrap to additional lines when they no longer fit on the initial line.
* The element(s) that don't fit will wrap to the bottom-left in the parent element.
## Spacing
With Foxify, control of the element's margin and padding is easy.
Margin and padding create spacing around your content and elemen.
{% embed url="" %}
Margins create extra space around the element, while padding pushes the content deeper inside the element border.
You can decide to use the same value for all four dimensions: top, right, bottom, and left, or adjust them separately.
{% tabs %}
{% tab title="Spacing settings - Uniform values" %}
{% endtab %}
{% tab title="Spacing settings - Separate values" %}
{% endtab %}
{% endtabs %}
You can also select the size unit you want to use: **px**, **rem**, or **em**. Want to know more about these measurement units? See this article:
{% content-ref url="../../faqs-and-troubleshooting/faqs/should-i-use-pixel-rem-or-em" %}
[should-i-use-pixel-rem-or-em](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/should-i-use-pixel-rem-or-em)
{% endcontent-ref %}
## Sizing
In this setting, you can change the section width and height of the element.
The recommended size for each element is already filled in the field.
{% hint style="info" %}
You can also click on the image and drag it to resize directly.
{% endhint %}
If you decide on using dimensions to your liking, remember to double-check to make sure the new dimensions work out across different devices.
To create a customized experience for shoppers, click on the device selector icon to set the dimensions on different screen sizes.
The **More settings** button allows you to set the minimum and maximum values for the selected element width and height.
Similar to spacing, both **px**, **rem**, or **em** are available.
## Background
The **Background** section lets you change the element's background using a [color](#background-color) or an [image](#undefined).
### Background color
* Choose from your predefined colors list in [Global styles](https://docs.foxecom.com/foxify-app/page-management/global-styles).
* Select a color from the color palette or input a [hex color code](https://htmlcolorcodes.com/).
### Background image
Click on **Select image** to use an image as a background. You can select one from existing images (in your [Shopify Files](https://domain.myshopify.com/admin/settings/files)), free images, or upload a new image.
In **More settings**, you can find more options to adjust different properties of the background:
#### Background attachment
The background-attachment property in CSS sets whether a background image's position is fixed within the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport), or scrolls with its containing block.
**Fixed**: The background image stays fixed no matter what.
**Scroll**: The background image scrolls with the main view, but stays fixed inside the local view.
**Local**: The background images scroll with the element's content.
{% hint style="info" %}
Still not sure how the three values work? Check out this [demo](https://css-tricks.com/almanac/properties/b/background-attachment/).
{% endhint %}
#### Background size
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
**Auto:** Default value. The background image is displayed in its original size.
**Contain**: Resize the background image to make sure the image is fully visible.
**Cover**: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
{% hint style="info" %}
Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency.
{% endhint %}
For example: the image we're using is 1000 x 512 px, jpg. format.
{% tabs %}
{% tab title="Background size: Auto" %}
{% endtab %}
{% tab title="Background size: Contain" %}
{% endtab %}
{% tab title="Background size: Cover" %}
{% endtab %}
{% endtabs %}
#### Background repeat
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
This setting works with **Auto** and **Contain** background size.
* Repeat: tile the image in both directions
* Repeat x: tile the image horizontally
* Repeat y: tile the image vertically
By default, the background image is set as no repeat.
For example: the image we're using is 250 x 200 px, jpg. format.
{% tabs %}
{% tab title="Background repeat: Repeat" %}
{% endtab %}
{% tab title="Background repeat: Repeat x" %}
{% endtab %}
{% tab title="Background repeat: Repeat y" %}
{% endtab %}
{% endtabs %}
#### Background position
This setting allows you to move your background image around within its container.
There are 9 options to place your background image:
* Top left/ top center/ top right
* Middle left/ middle center/ middle right
* Bottom left/ bottom center/ bottom right
## Borders
You can add and adjust the element's border in Styles settings.
**Border style:** Choose from 3 available styles: **Solid line**, **Dotted line**, and **Dashed line**. By default, an element is set as no border.
{% tabs %}
{% tab title="Solid line" %}
{% endtab %}
{% tab title="Dotted line" %}
{% endtab %}
{% tab title="Dashed line" %}
{% endtab %}
{% endtabs %}
**Border color**
* Select from predefined [global styles colors](https://docs.foxecom.com/foxify-app/page-management/global-styles#colors).
* Choose from the color palette or use a hex color code.
This section also allows you to control the width of the border and its roundness using **Border width** and **Border radius** settings.
## Effects
This section is for modifying the opacity of the whole section. Simply tweak the toggle to adjust it.
## Custom CSS
Changes you made in Styles settings will be shown here.
You can edit the CSS code in **Custom CSS** and the changes will be reflected in the settings.
Here is one example:
.gif?alt=media&token=fc530a6a-c2c1-466b-8523-523ead6e96e2)
.gif?alt=media&token=038e7cf9-f6e7-4c2e-880f-fe3ccb2f4933)
.gif?alt=media&token=a4721c06-f3dc-480b-801a-4dba3c30c237)
