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 a style

To create a style, you need to provide a unique name. The Webflow API prevents creating styles with duplicate names to maintain uniqueness across your project.

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

Add style properties

Add CSS properties to a style. Refer to this list of Style Properties for a full index of properties that can added to a style in Webflow.

You can add properties to a style in two ways:

The set property 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
2const newStyle = await webflow.createStyle("My Custom Style");
3
4// Set a single property
5await newStyle.setProperty("background-color", "blue")
3

Apply styles to elements

Once you’ve created and modified a style, you can apply it to one or more elements.

1// Get selected element
2const selectedElement = await webflow.getSelectedElement()
3
4// Get style
5const myStyle = await webflow.getStyleByName("My Custom Style");
6
7// Apply style to element
8await 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.

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

1{
2  breakpoint?: BreakpointId
3  pseudo?: PseudoStateKey
4}

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

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

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

    1type 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"

Example

1// Create new style
2const newStyle = await webflow.createStyle("My Custom Style");
3
4// Property Map for XXL Breakpoint
5const propertyMapXXL = {
6  'font-size': "16px",
7  'font-weight': "bold",
8}
9
10// Property Map for Medium Breakpoint
11const propertyMapMedium = {
12  'font-size': "12px",
13  'font-weight': "bold",
14}
15
16// Set style properties for XXL Breakpoint and hover state
17await newStyle.setProperties(propertyMapXXL, {breakpoint: "xxl", pseudo: "hover"})
18
19// Set styles for Medium Breakpoint and hover state
20await newStyle.setProperties(propertyMapMedium, {breakpoint: "medium", pseudo: "hover"})

Breakpoint IDs

Breakpoint IDDescription
xxlVery large screens or high-resolution monitors
xlLarge desktop monitors
largeStandard desktop monitors
mainSuitable for smaller desktops or large tablets
mediumSuitable for tablets and some large phones
smallSuitable for larger mobile devices
tinySuitable for the smallest mobile devices

Pseudo-State Keys

Pseudo-StateDesigner StateDescription
hoverHoverElement is hovered over by the mouse
pressedPressedElement is in pressed state
visitedVisitedLink element has been visited
focusFocusedElement has keyboard/input focus
focus-visibleFocused (Keyboard)Element has keyboard focus with visible indicator
focus-within—Element or its descendant has focus
placeholderPlaceholderPlaceholder text in form block inputs
first-childFirst ItemFirst Collection Item in a collection list
last-childLast ItemLast Collection Item in a collection list
nth-child(odd)Odd ItemsOdd-numbered Collection Item in a collection list
nth-child(even)Even ItemsEven-numbered Collection Item in a collection list
Built with