Overview

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.

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

❗️

Combo Class creation is not currently supported.

The Designer APIs currently offer read-only access to Combo Classes.

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.
  
  

  TypeScript

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

• setProperties(PropertyMap, options?) - This method allows you to set multiple properties at once through a PropertyMap parameter. PropertyMap is an object with property names as its keys, and the corresponding property value or Variable as its value. Additionally, you can include an optional options parameter, [which we cover below.]
  
  

  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)
  
  

Responsive styling with breakpoints and pseudo states

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

Apps can pass the optional options parameter in certain style property methods, allowing developers to retrieve or set distinct properties for a style based on the current context or screen size. The options parameter takes a BreakpointAndPseudo object, which consists of the following optional properties:

• breakpoint: BreakpointId - "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny" - An optional identifier of the breakpoint size, also known as media query, in the Designer.
• pseudo: PseudoStateKey"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after" - An optional identifier for the pseudo-classes of an element that can be targeted and styled using CSS.

// 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
await newStyle.setProperties(propertyMapXXL, {breakpoint: "xxl"})

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

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.

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

// 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 newStyle to element
if (selectedElement?.styles)
  await selectedElement.setStyles([newStyle])