> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Styles

Customize the look and feel of Elements with Styles. Styles, [also referred to as Classes in the Designer](https://help.webflow.com/hc/en-us/articles/33961311094419), save styling information that can be applied to as many elements as you want across a site.

## Style properties

Every `Style` instance includes the following read-only properties. These values are populated when the style is first returned from the API, so you can read them synchronously without `await`.

| Property | Type          | Description                                                                                                                                 |
| :------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------ |
| `id`     | `string`      | The unique identifier of the style.                                                                                                         |
| `name`   | `string`      | The style's name, as it appears in the Designer's Styles panel (for example, `button` or `is-primary`).                                     |
| `type`   | `StyleType`   | The style's type: `'global'`, `'combo'`, `'tag'`, `'element'`, or `'descendant'`. See [`getType()`](/designer/reference/style/get-type).    |
| `source` | `StyleSource` | The style's origin: `'site'` for styles created on the current site, or `'library'` for styles from a Shared Library or AI Site Generation. |

```typescript
// Read style metadata synchronously
const styles = await webflow.getAllStyles();

styles.forEach((style) => {
  console.log(style.name, style.type, style.source);
});
```

## Working with styles

#### Create a style

To create a style, you need to provide a unique name. The Webflow API prevents creating styles with duplicate names to maintain uniqueness across your project.

```typescript
// Create new style
const newStyle = await webflow.createStyle(styleName);
```

#### Add style properties

Add CSS properties to a style. [Refer to this list of Style Properties](/designer/reference/style-properties) for a full index of properties that can added to a style in Webflow.

You can add properties to a style in two ways:

#### Set a single property

The [`set property`](/designer/reference/set-style-property) method requires you to pass a single property name and its corresponding value as `string` parameters. Additionally, you can include an optional `options`  parameter, [which we cover below.](#responsive-styling-with-breakpoints-and-pseudo-states)

```typescript
// Create new style
const newStyle = await webflow.createStyle("My Custom Style");

// Set a single property
await newStyle.setProperty("background-color", "blue")
```

#### Set multiple properties

The [set properties](/designer/reference/set-style-properties) method allows you to set multiple properties at once through  a *PropertyMap* parameter.

A ***PropertyMap*** is a TypeScript object that maps CSS property names to their corresponding values. Each key in the object represents a CSS property name, while the value can be either a string literal (like "16px" or "bold") or a Webflow Variable (like a ColorVariable or SizeVariable).

```typescript
// Create new style
const newStyle = await webflow.createStyle("My Custom Style");

// Create a variable
const collection = await webflow.getDefaultVariableCollection()
const webflowBlue = await collection?.createColorVariable('Webflow Blue', '#146EF5')

// Create a PropertyMap object
const propertyMap : PropertyMap = {
                'background-color': webflowBlue as ColorVariable,
                'font-size': "16px",
                'font-weight': "bold",
              }

// Set style properties
await newStyle.setProperties(propertyMap)
```

#### Apply styles to elements

Once you've created and modified a style, you can apply it to one or more elements.

```typescript
// Get selected element
const selectedElement = await webflow.getSelectedElement()

// Get style
const myStyle = await webflow.getStyleByName("My Custom Style");

// Apply style to element
await selectedElement.setStyles([newStyle])
```

## Responsive styling with [breakpoints and pseudo states](https://help.webflow.com/hc/en-us/articles/33961300305811)

Webflow's responsive design features enable customization of style properties for different contexts, such as varying screen sizes or specific states like `:hover` or `:active`. You can also target a specific component variant.

Pass the `options` parameter when setting style properties to customize the style for different breakpoints, pseudo-states, and variants.

```typescript
{
  breakpoint?: BreakpointId,
  pseudo?: PseudoStateKey,
  variantId?: string
}
```

* **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
  ```typescript
  type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
  ```

* **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
  ```typescript
  type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" |
    "first-child" | "last-child" | "hover" | "active" |
    "visited" | "focus" | "focus-visible" | "focus-within" |
    "placeholder" | "empty" | "before" | "after"
  ```

* **`variantId`**: The ID of the variant to target.
  To retrieve variant IDs, use [`component.getVariants()`](/designer/reference/get-variants).
  The primary variant returns an ID of `'base'` from that method, but `'base'` is not a valid value for this parameter.
  To target the primary variant's styles, omit `variantId`.

**Example**

```typescript
// Create new style
const newStyle = await webflow.createStyle("My Custom Style");

// Property Map for XXL Breakpoint
const propertyMapXXL = {
  'font-size': "16px",
  'font-weight': "bold",
}

// Property Map for Medium Breakpoint
const propertyMapMedium = {
  'font-size': "12px",
  'font-weight': "bold",
}

// Set style properties for XXL Breakpoint and hover state
await newStyle.setProperties(propertyMapXXL, {breakpoint: "xxl", pseudo: "hover"})

// Set styles for Medium Breakpoint and hover state
await newStyle.setProperties(propertyMapMedium, {breakpoint: "medium", pseudo: "hover"})

// Set style properties for a specific variant
await newStyle.setProperty('color', 'red', { variantId: 'variant-123' })

// Set style properties for a variant at a specific breakpoint and pseudo-state
await newStyle.setProperty('font-size', '24px', {
  variantId: 'variant-123',
  breakpoint: 'medium',
  pseudo: 'hover',
})
```

### Breakpoint IDs

| Breakpoint ID | Description                                    |
| :------------ | :--------------------------------------------- |
| `xxl`         | Very large screens or high-resolution monitors |
| `xl`          | Large desktop monitors                         |
| `large`       | Standard desktop monitors                      |
| `main`        | Suitable for smaller desktops or large tablets |
| `medium`      | Suitable for tablets and some large phones     |
| `small`       | Suitable for larger mobile devices             |
| `tiny`        | Suitable for the smallest mobile devices       |

### Pseudo-State Keys

| Pseudo-State      | Designer State     | Description                                        |
| :---------------- | :----------------- | :------------------------------------------------- |
| `hover`           | Hover              | Element is hovered over by the mouse               |
| `pressed`         | Pressed            | Element is in pressed state                        |
| `visited`         | Visited            | **Link** element has been visited                  |
| `focus`           | Focused            | Element has keyboard/input focus                   |
| `focus-visible`   | Focused (Keyboard) | Element has keyboard focus with visible indicator  |
| `focus-within`    | --                 | Element or its descendant has focus                |
| `placeholder`     | Placeholder        | Placeholder text in form block inputs              |
| `first-child`     | First Item         | First Collection Item in a collection list         |
| `last-child`      | Last Item          | Last Collection Item in a collection list          |
| `nth-child(odd)`  | Odd Items          | Odd-numbered Collection Item in a collection list  |
| `nth-child(even)` | Even Items         | Even-numbered Collection Item in a collection list |

## FAQs

#### Can I style HTML Tags with the Webflow API?

No, you can't style HTML Tags with the Designer API. Currently, the Designer API only supports creating and applying CSS Classes.