> 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.

# Create style

## **`webflow.createStyle(name, options?)`**

Create a new style with a provided name. Provide a parent style to create a [combo class](https://help.webflow.com/hc/en-us/articles/33961311094419-Classes#how-to-create-a-combo-class).

### Syntax

```typescript
webflow.createStyle(
  name: string,
  options?: {
    parent?: Style
  }
): Promise<Style>
```

### Parameters

* **`name`**: *String* - The name of the style.
* **`options`**: *Object* - An object containing the following properties:
  * **`parent`**: *Style* - A style object that will be the parent of the combo class style.

### Returns

**Promise\<*Style*>**

A Promise that resolves to a Style object.

### Example

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

// Set properties for the style
newStyle.setProperties({
  "background-color": "blue",
  "font-size": "16px",
  "font-weight": "bold",
});

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {

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

} else {
  console.log("No element selected")
}
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer ability

| Designer ability         | Locale  | Branch | Workflow | Sitemode |
| :----------------------- | :------ | :----- | :------- | :------- |
| **canCreateStyleBlocks** | Primary | Any    | Canvas   | Design   |