Create style

`webflow.createStyle(name, options?)`

Create a new style with a provided name. Provide a parent style to create a combo class.

Syntax

1 webflow.createStyle(
2   name: string,
3   options?: {
4     parent?: Style
5   }
6 ): 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

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 }

Try this example

Designer ability

Designer ability	Locale	Branch	Workflow	Sitemode
canCreateStyleBlocks	Primary	Any	Canvas	Design

1	webflow.createStyle(
2	name: string,
3	options?: {
4	parent?: Style
5	}
6	): Promise<Style>

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	}