Webflow Designer API: Create style

`webflow.createStyle(name)`

Create a new Style with a provided name.

Syntax

1 webflow.createStyle(name: string): Promise<Style>

Parameters

name: String - The name of the style.

Returns

Promise<Style>

A Promise that resolves to a Style object.

Example

1 // Create new style
2 const newStyle = await webflow.createStyle(styleName);
3 
4 // Set properties for the style
5 newStyle.setProperties({
6   "background-color": "blue",
7   "font-size": "16px",
8   "font-weight": "bold",
9 });
10 
11 // Get Selected Element
12 const selectedElement = await webflow.getSelectedElement()
13 
14 if (selectedElement?.styles) {
15 
16   // Apply style to selected element
17   await selectedElement.setStyles([newStyle])
18 
19 } else {
20   console.log("No element selected")
21 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canCreateStyleBlocks	Primary	Any	Canvas	Design

1	// Create new style
2	const newStyle = await webflow.createStyle(styleName);
3
4	// Set properties for the style
5	newStyle.setProperties({
6	"background-color": "blue",
7	"font-size": "16px",
8	"font-weight": "bold",
9	});
10
11	// Get Selected Element
12	const selectedElement = await webflow.getSelectedElement()
13
14	if (selectedElement?.styles) {
15
16	// Apply style to selected element
17	await selectedElement.setStyles([newStyle])
18
19	} else {
20	console.log("No element selected")
21	}