# Styles Reference

This is a reference to the available style properties that you can apply to the root element (global), individual elements, and individual blocks in `theme.json`. Please review the [Applying Styles](https://developer.wordpress.org/themes/global-settings-and-styles/styles/applying-styles/) documentation to learn how to apply styles to your theme.

## Border

There are two methods for working with the `border` style property. The first is to target all sides of a block or element with the properties shown in the table:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>border.radius</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a></td>
</tr>
<tr>
<td><code>border.color</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color"><code>border-color</code></a></td>
</tr>
<tr>
<td><code>border.style</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style"><code>border-style</code></a></td>
</tr>
<tr>
<td><code>border.width</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width"><code>border-width</code></a></td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "border": {
            "color": "#000000",
            "style": "solid",
            "width": "1px"
        }
    }
}
```

The second method is to specifically target the `top`, `right`, `bottom`, and `left` sides:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>border.&lt;side&gt;.color</code></td>
<td>string, object</td>
<td><code>border-&lt;side&gt;-color</code></td>
</tr>
<tr>
<td><code>border.&lt;side&gt;.style</code></td>
<td>string, object</td>
<td><code>border-&lt;side&gt;-style</code></td>
</tr>
<tr>
<td><code>border.&lt;side&gt;.width</code></td>
<td>string, object</td>
<td><code>border-&lt;side&gt;-width</code></td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "border": {
            "top": {
                "color": "#000000",
                "style": "solid",
                "width": "1px"
            }
        }
    }
}
```

## Color

The `color` style property lets you define the default text, background, and link colors for a block or element:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>color.text</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a></td>
</tr>
<tr>
<td><code>color.background-color</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a></td>
</tr>
<tr>
<td><code>color.link</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> (applied to nested <code>&lt;a&gt;</code> elements)</td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "blocks": {
            "core/group": {
                "color": {
                    "text": "#000000",
                    "background": "#ffffff",
                    "link": "#777777"
                }
            }
        }
    }
}
```

## Dimensions

The `dimensions` style property lets you define the minimum height for a block or element:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>dimensions.minHeight</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height"><code>min-height</code></a></td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "blocks": {
            "core/cover": {
                "dimensions": {
                    "minHeight": "50vh"
                }
            }
        }
    }
}
```

## Filter

The `filter` style property lets you define filters for a block or element. Currently, you can set a default duotone filter:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>filter.duotone</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter"><code>filter</code></a></td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "blocks": {
            "core/image": {
                "filter": {
                    "duotone": "var(--wp--preset--duotone--default-filter)"
                }
            }
        }
    }
}
```

## Shadow

The `shadow` style property lets you define the default box-shadow style for a block or element:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>shadow</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code>box-shadow</code></a></td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "blocks": {
            "core/heading": {
                "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
            }
        }
    }
}
```

## Spacing

The `spacing` style property lets you define the default gap, margin, and padding for a block or element:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>blockGap</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top"><code>margin-top</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap"><code>gap</code></a></td>
</tr>
<tr>
<td><code>margin.&lt;side&gt;</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin-&lt;side&gt;</code></a></td>
</tr>
<tr>
<td><code>padding.&lt;side&gt;</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><code>padding-&lt;side&gt;</code></a></td>
</tr>
</tbody>
</table>
</figure>

You can define any or all of the sides (`top`, `right`, `bottom`, `left`) for the `margin` and `padding` style properties.

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "spacing": {
            "blockGap": "2rem",
            "margin": {
                "top": "2rem",
                "bottom": "2rem"
            },
            "padding": {
                "left": "2rem",
                "right": "2rem"
            }
        }
    }
}
```

## Typography

The `typography` style property lets you define default font and text-related styles for a block or element:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fontFamily</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"><code>font-family</code></a></td>
</tr>
<tr>
<td><code>fontSize</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><code>font-size</code></a></td>
</tr>
<tr>
<td><code>fontStyle</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style"><code>font-style</code></a></td>
</tr>
<tr>
<td><code>fontWeight</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a></td>
</tr>
<tr>
<td><code>letterSpacing</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing"><code>letter-spacing</code></a></td>
</tr>
<tr>
<td><code>lineHeight</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a></td>
</tr>
<tr>
<td><code>textColumns</code></td>
<td>string</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns"><code>columns</code></a></td>
</tr>
<tr>
<td><code>textDecoration</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a></td>
</tr>
<tr>
<td><code>writingMode</code></td>
<td>string, object</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode"><code>writing-mode</code></a></td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "blocks": {
            "core/paragraph": {
                "typography": {
                    "fontFamily": "Georgia, serif",
                    "fontSize": "1.25rem",
                    "fontStyle": "normal",
                    "fontWeight": "500",
                    "letterSpacing": "0",
                    "lineHeight": "1.6",
                    "textDecoration": "none"
                }
            }
        }
    }
}
```

## CSS

The `css` property lets you write custom CSS directly in `theme.json` for a block or element:

<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>css</code></td>
<td>string</td>
<td>—</td>
</tr>
</tbody>
</table>
</figure>

Example usage in `theme.json`:

```
{
    "version": 2,
    "styles": {
        "blocks": {
            "core/gallery": {
                "css": "--wp--style--gallery-gap-default: 1rem;"
            }
        }
    }
}
```

For an in-depth look at how to use the `css` style property, read [Per-block CSS with `theme.json`](https://developer.wordpress.org/news/2023/04/per-block-css-with-theme-json/) on the WordPress Developer Blog.