Styles

Customize the look and feel of Elements with Styles. Styles, also referred to as Classes in the Designer, save styling information that can be applied to as many elements as you want across a site.

Working with styles

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

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

1
// Get selected element
2
const selectedElement = await webflow.getSelectedElement()
3
4
// Get style
5
const myStyle = await webflow.getStyleByName("My Custom Style");
6
7
// Apply style to element
8
await selectedElement.setStyles([newStyle])

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. You can also target a specific component variant.

Pass the options parameter when setting style properties to customize the style for different breakpoints, pseudo-states, and variants.

1
{
2
  breakpoint?: BreakpointId,
3
  pseudo?: PseudoStateKey,
4
  variantId?: string
5
}

• BreakpointId: Identifies the responsive breakpoint to get styles for.

  1
  type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"

• PseudoStateKey: Specifies a CSS pseudo-class to get styles for.

  1
  type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" |
  2
    "first-child" | "last-child" | "hover" | "active" | "pressed" |
  3
    "visited" | "focus" | "focus-visible" | "focus-within" |
  4
    "placeholder" | "empty" | "before" | "after"

• variantId: The ID of the variant to target. To retrieve variant IDs, use component.getVariants(). The primary variant returns an ID of 'base' from that method, but 'base' is not a valid value for this parameter. To target the primary variant’s styles, omit variantId.

Example

1
// Create new style
2
const newStyle = await webflow.createStyle("My Custom Style");
3
4
// Property Map for XXL Breakpoint
5
const propertyMapXXL = {
6
  'font-size': "16px",
7
  'font-weight': "bold",
8
}
9
10
// Property Map for Medium Breakpoint
11
const propertyMapMedium = {
12
  'font-size': "12px",
13
  'font-weight': "bold",
14
}
15
16
// Set style properties for XXL Breakpoint and hover state
17
await newStyle.setProperties(propertyMapXXL, {breakpoint: "xxl", pseudo: "hover"})
18
19
// Set styles for Medium Breakpoint and hover state
20
await newStyle.setProperties(propertyMapMedium, {breakpoint: "medium", pseudo: "hover"})
21
22
// Set style properties for a specific variant
23
await newStyle.setProperty('color', 'red', { variantId: 'variant-123' })
24
25
// Set style properties for a variant at a specific breakpoint and pseudo-state
26
await newStyle.setProperty('font-size', '24px', {
27
  variantId: 'variant-123',
28
  breakpoint: 'medium',
29
  pseudo: 'hover',
30
})

Breakpoint IDs

Pseudo-State Keys

FAQs