---
title: "Adding custom CSS to your Views"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravitycalendar/linking-an-event-to-a-single-entry-page/"
---

GravityView allows you to add custom CSS directly to a View through the **Custom Code** tab in the View Settings. The CSS loads only when that View renders, so it won't affect other pages on your site.

**Note:** This feature requires GravityView 2.19 or later. Placeholders require GravityView 2.50 or later.

## How to add custom CSS

- Edit your View in WordPress.
- Scroll down to the **Settings** metabox.
- Click the **Custom Code** tab (the code icon).
- Enter your CSS in the **Custom CSS** field.
- Click **Update** or **Publish**.

The CSS is placed inside `` tags in the page's ``, after GravityView's default styles. This means your custom CSS takes priority over GravityView's built-in styles.

## Available placeholders

GravityView provides three placeholders that are automatically replaced with View-specific values when the page loads. Use these to write CSS that targets only this View.

| Placeholder | Replaced with | Example output |
|---|---|---|
| `VIEW_SELECTOR` | A CSS selector targeting only this View | `.gv-container.gv-container-123` |
| `VIEW_ID` | The View's ID number | `123` |
| `GF_FORM_ID` | The connected Gravity Forms form ID | `5` |

### Using VIEW\_SELECTOR (recommended)

`VIEW_SELECTOR` is the easiest way to scope styles to a single View. It outputs a double-class selector (e.g., `.gv-container.gv-container-123`) that provides high specificity, so you typically don't need `!important`.

```
VIEW_SELECTOR {
    background: #f5f5f5;
}

VIEW_SELECTOR .gv-table-view th {
    background: #333;
    color: white;
}
```

```
VIEW_SELECTOR {
    background: #f5f5f5;
}

VIEW_SELECTOR .gv-table-view th {
    background: #333;
    color: white;
}
```

### Using VIEW\_ID

`VIEW_ID` is useful when you need the raw View ID number, for example in an HTML `id` attribute selector.

```
#gv-view-VIEW_ID-1 {
    border: 2px solid #0073aa;
}
```

```
#gv-view-VIEW_ID-1 {
    border: 2px solid #0073aa;
}
```

### Targeting multiple instances of the same View

When the same View is embedded multiple times on a page, each instance gets a unique HTML `id` with an incrementing number: `gv-view-{VIEW_ID}-1`, `gv-view-{VIEW_ID}-2`, etc.

```
/* First instance */
#gv-view-VIEW_ID-1 {
    max-width: 600px;
}

/* Second instance */
#gv-view-VIEW_ID-2 {
    max-width: 100%;
}
```

```
/* First instance */
#gv-view-VIEW_ID-1 {
    max-width: 600px;
}

/* Second instance */
#gv-view-VIEW_ID-2 {
    max-width: 100%;
}
```

### Using GF\_FORM\_ID

`GF_FORM_ID` is replaced with the connected Gravity Forms form ID. If the View does not have a connected form, this placeholder is left as-is to avoid generating invalid CSS.

## Important notes

- Placeholders are **case-sensitive** and must be uppercase.
- Placeholders are replaced everywhere in your code, including inside comments.
- Custom CSS is output only once per View, even if the same View is embedded multiple times on a page.
- The double-class selector from `VIEW_SELECTOR` provides enough specificity that `!important` is typically unnecessary.

## Developer notes

Custom CSS is added using WordPress's `wp_add_inline_style()` function, attached to the `gravityview_default_style` handle. This means it loads in the `` after GravityView's main stylesheet.

You can add custom placeholders using the `gk/gravityview/custom-code/placeholders` filter:

```
add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );
```

```
add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );
```

**Note:** If you have removed the default container classes using the `gravityview/render/container/class` filter, the `VIEW_SELECTOR` placeholder will not match your View's container. Use the `VIEW_ID` placeholder instead.

## Related articles

- [Adding custom JavaScript to your Views](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-javascript-or-jquery-code-snippets-to-your-views/)
- [View Settings: Custom Code](https://www.gravitykit.com/docs/gravityview/view-settings/view-settings-custom-code/)
- [Adding custom PHP code snippets to your website](https://www.gravitykit.com/docs/gravityview/customizing-your-views/where-to-put-code-samples/)