Styles

The Styles APIs enable Apps to customize the look and feel of Elements, helping designers create consistent and responsive pro websites. Styles, also referred to as Classes in the Designer, save styling information that applies to as many elements as you want across a site.

In this overview, we’ll cover how to create styles, use CSS to adjust their look and feel through style properties, and apply styles to multiple elements throughout a page.

Creating a style

To create a style, you just need to give it a unique name. The Webflow API will not allow you to create a style with the same name as another.

1
// Create new style
2
const newStyle = await webflow.createStyle(styleName);

Adding style properties

To manage the look and feel of a style, you can adjust its style properties, which are the CSS properties used to define the appearance and formatting of elements on a web page. Refer to this list of Style Properties for a full index of properties that can be set on a style in Webflow.

You can add properties to a style in two ways:

• setProperty(prop, value, options?) - This 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.
  
  

1
// Create new style
2
const newStyle = await webflow.createStyle("My Custom Style");
3
4
// Set style properties
5
await newStyle.setProperty("background-color", "blue")

Applying styles to elements

Applying a style to an element will allow the element to take on the characteristics and properties of a style, and once applied, reflect any changes that are made to the style. Using the Element methods, let’s apply a style to an element.

1
// Get selected element
2
const selectedElement = await webflow.getSelectedElement()
3
4
// Create new style
5
const newStyle = await webflow.createStyle("My Custom Style");
6
7
// Create a variable
8
const collection = await webflow.getDefaultVariableCollection()
9
const webflowBlue = await collection?.createColorVariable('Webflow Blue', '#146EF5')
10
11
// Create a PropertyMap object
12
const propertyMap: PropertyMap = {
13
  'background-color': webflowBlue as ColorVariable,
14
  'font-size': "16px",
15
  'font-weight': "bold",
16
}
17
18
// Set style properties
19
await newStyle.setProperties(propertyMap)
20
21
// apply newStyle to element
22
if (selectedElement?.styles)
23
  await selectedElement.setStyles([newStyle])